/* おえかきアトリエ 紹介ページ（2026-10 リデザイン）
   画用紙（ちぎった色紙）＋クレヨン＋アプリのクレイスタンプ。素のCSS・ビルド不要。
   旧 site.css は privacy/ が使うので残してある。 */

@font-face{font-family:"Atelier Display";src:url("fonts/atelier-display.woff2?v=20261008d") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Atelier Label";src:url("fonts/atelier-label.woff2?v=20261008d") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atelier Num";src:url("fonts/atelier-num.woff2?v=20261008d") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:"Atelier Hand";src:url("fonts/atelier-hand.woff2?v=20261008d") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --desk:#FFFAF0;
  --ink:#2A211C;--ink-2:#4A3F37;--muted:#6E6157;
  --red:#FF5A47;--red-ink:#D8382A;
  --orange:#FF9F1C;
  --yellow:#FFCB2F;
  --green:#2FBF71;--green-ink:#1E8A4F;
  --teal:#12A89D;--teal-ink:#0B7D74;
  --sky:#3BA7FF;--sky-ink:#1F6FC0;
  --blue:#2F6BFF;
  --purple:#8E6BFF;--purple-ink:#6A4FC4;
  --pink:#FF6FA8;
  --f-display:"Atelier Num","Atelier Display","Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;
  --f-label:"Atelier Label","Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;
  --f-hand:"Atelier Hand","Hiragino Maru Gothic ProN","BIZ UDPGothic",sans-serif;
  --f-body:"Hiragino Maru Gothic ProN","Hiragino Sans","BIZ UDPGothic","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --g:clamp(18px,5vw,72px);
  --max:1200px;
  --pop:cubic-bezier(.3,1.5,.55,1);
  --soft:cubic-bezier(.2,.8,.2,1);
  --crayon-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%232A211C' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M8 18L22 4l6 6-14 14z' fill='%2312A89D'/%3E%3Cpath d='M8 18l6 6-9 3z' fill='%23FFE2A0'/%3E%3Cpath d='M4 26.2l1.6.5-2.3 1.6z' fill='%23FF5A47'/%3E%3Cpath d='M22 4l6 6 1.4-1.4a2 2 0 000-2.8l-3.2-3.2a2 2 0 00-2.8 0z' fill='%23FFCB2F'/%3E%3C/g%3E%3C/svg%3E") 3 29;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --torn-a:polygon(0.00% 5.9px,1.70% 4.8px,3.16% 5.9px,4.29% 5.8px,5.83% 4.2px,7.43% 0.8px,9.31% 5.2px,10.60% 0.5px,12.61% 5.6px,14.13% 2.2px,16.05% 0.5px,17.51% 3.2px,18.43% 3.1px,20.14% 9.1px,21.59% 8.4px,23.56% 7.5px,25.04% 5.5px,26.17% 6.3px,28.29% 7.2px,29.52% 7.4px,31.21% 4.3px,33.08% 6.0px,34.14% 4.1px,35.96% 5.5px,37.71% 1.0px,39.49% 0.0px,40.55% 4.7px,41.87% 3.6px,43.34% 5.9px,45.55% 6.3px,47.21% 5.6px,48.61% 8.5px,50.07% 8.1px,51.87% 11.0px,53.10% 9.5px,54.29% 9.2px,56.38% 10.3px,58.10% 4.2px,59.27% 5.8px,60.51% 3.3px,62.20% 0.2px,63.67% 4.4px,65.29% 0.7px,67.09% 5.5px,68.37% 3.3px,70.36% 7.4px,72.16% 8.4px,73.24% 6.3px,74.87% 10.5px,76.97% 5.9px,77.83% 6.7px,79.45% 8.2px,81.33% 6.1px,82.37% 6.2px,84.26% 6.2px,86.35% 5.9px,87.51% 4.4px,89.22% 0.0px,90.98% 4.4px,92.52% 4.6px,93.65% 2.2px,94.96% 4.7px,96.48% 1.7px,98.18% 3.5px,100.00% 5.8px,100.00% calc(100% - 2.9px),98.12% calc(100% - 4.7px),96.75% calc(100% - 5.0px),95.65% calc(100% - 9.4px),93.43% calc(100% - 6.6px),92.05% calc(100% - 6.7px),90.29% calc(100% - 9.1px),89.51% calc(100% - 5.1px),87.49% calc(100% - 1.2px),85.58% calc(100% - 2.1px),84.16% calc(100% - 4.9px),82.51% calc(100% - 0.0px),81.66% calc(100% - 3.0px),79.37% calc(100% - 4.0px),77.70% calc(100% - 5.0px),76.99% calc(100% - 8.6px),75.18% calc(100% - 5.5px),73.32% calc(100% - 5.8px),72.12% calc(100% - 8.8px),70.56% calc(100% - 7.3px),68.50% calc(100% - 10.1px),67.62% calc(100% - 9.5px),65.90% calc(100% - 8.0px),64.28% calc(100% - 2.6px),62.52% calc(100% - 2.4px),60.51% calc(100% - 0.0px),59.18% calc(100% - 0.7px),57.99% calc(100% - 5.9px),56.20% calc(100% - 6.4px),55.13% calc(100% - 7.6px),53.00% calc(100% - 3.7px),51.32% calc(100% - 4.7px),49.73% calc(100% - 8.7px),48.80% calc(100% - 10.8px),46.86% calc(100% - 9.6px),45.58% calc(100% - 5.2px),43.89% calc(100% - 10.2px),42.44% calc(100% - 7.9px),40.61% calc(100% - 2.7px),39.32% calc(100% - 2.6px),37.77% calc(100% - 6.2px),35.84% calc(100% - 1.8px),34.78% calc(100% - 4.1px),32.52% calc(100% - 0.5px),30.94% calc(100% - 6.9px),29.96% calc(100% - 2.8px),28.42% calc(100% - 9.9px),26.70% calc(100% - 6.5px),25.04% calc(100% - 5.7px),23.00% calc(100% - 11.0px),22.01% calc(100% - 8.5px),20.70% calc(100% - 7.2px),19.08% calc(100% - 8.9px),16.93% calc(100% - 3.6px),15.44% calc(100% - 2.3px),14.14% calc(100% - 1.4px),12.43% calc(100% - 0.0px),11.31% calc(100% - 1.4px),9.34% calc(100% - 3.4px),8.18% calc(100% - 3.1px),6.63% calc(100% - 4.8px),4.72% calc(100% - 6.3px),2.69% calc(100% - 6.8px),1.28% calc(100% - 4.6px),0.00% calc(100% - 10.7px));
  --torn-b:polygon(0.00% 9.4px,1.68% 8.4px,2.87% 10.6px,4.96% 8.2px,6.25% 5.6px,7.37% 5.5px,9.45% 2.3px,11.20% 2.3px,12.26% 0.1px,14.51% 4.3px,15.96% 3.2px,16.77% 1.4px,18.75% 0.5px,20.72% 3.1px,21.56% 7.4px,23.10% 9.3px,24.96% 7.7px,26.42% 8.0px,27.84% 5.3px,30.02% 6.7px,31.50% 6.1px,33.23% 10.2px,34.60% 8.2px,36.01% 6.9px,37.16% 4.0px,39.36% 1.2px,41.01% 5.4px,42.11% 1.5px,43.71% 1.8px,45.76% 2.4px,46.45% 1.2px,48.63% 8.6px,50.00% 6.2px,51.61% 9.1px,52.87% 8.9px,54.74% 9.4px,55.96% 6.2px,57.68% 11.0px,59.24% 8.1px,60.76% 3.6px,62.11% 7.5px,64.31% 3.3px,65.79% 4.5px,67.55% 5.9px,68.67% 5.9px,70.73% 3.3px,72.22% 3.1px,73.33% 2.3px,75.34% 2.8px,76.17% 8.5px,78.37% 7.2px,79.99% 5.0px,81.03% 7.0px,82.74% 6.2px,83.99% 7.0px,86.30% 10.8px,87.72% 6.2px,88.84% 8.5px,90.65% 5.7px,91.76% 1.2px,94.05% 4.7px,95.66% 3.1px,96.81% 3.2px,98.75% 1.9px,100.00% 4.4px,100.00% calc(100% - 10.5px),98.00% calc(100% - 9.5px),97.28% calc(100% - 4.0px),95.40% calc(100% - 7.3px),94.07% calc(100% - 5.6px),91.97% calc(100% - 3.2px),91.04% calc(100% - 5.8px),88.73% calc(100% - 0.0px),87.13% calc(100% - 0.0px),85.89% calc(100% - 0.5px),84.71% calc(100% - 5.0px),82.48% calc(100% - 5.4px),81.09% calc(100% - 6.3px),79.44% calc(100% - 5.1px),77.84% calc(100% - 7.4px),76.75% calc(100% - 8.9px),74.59% calc(100% - 9.9px),73.77% calc(100% - 9.6px),72.14% calc(100% - 3.2px),70.28% calc(100% - 2.4px),68.99% calc(100% - 1.9px),67.38% calc(100% - 1.5px),65.80% calc(100% - 1.3px),63.65% calc(100% - 1.7px),62.33% calc(100% - 5.6px),60.75% calc(100% - 3.6px),59.42% calc(100% - 7.9px),57.45% calc(100% - 6.7px),56.26% calc(100% - 8.8px),55.11% calc(100% - 6.7px),53.30% calc(100% - 8.7px),51.62% calc(100% - 5.4px),50.28% calc(100% - 11.0px),48.31% calc(100% - 5.8px),47.32% calc(100% - 3.1px),44.93% calc(100% - 1.6px),44.03% calc(100% - 5.3px),42.14% calc(100% - 3.6px),40.19% calc(100% - 3.4px),39.01% calc(100% - 2.7px),37.40% calc(100% - 2.6px),35.69% calc(100% - 1.2px),34.32% calc(100% - 3.8px),33.00% calc(100% - 9.0px),31.45% calc(100% - 7.5px),29.45% calc(100% - 7.6px),28.11% calc(100% - 9.5px),26.98% calc(100% - 5.3px),24.98% calc(100% - 7.3px),23.63% calc(100% - 9.0px),22.13% calc(100% - 5.9px),20.55% calc(100% - 5.0px),19.07% calc(100% - 4.3px),17.35% calc(100% - 0.7px),16.00% calc(100% - 1.7px),14.17% calc(100% - 5.3px),12.92% calc(100% - 7.4px),10.49% calc(100% - 3.9px),9.21% calc(100% - 5.7px),7.49% calc(100% - 7.9px),5.87% calc(100% - 6.9px),5.09% calc(100% - 10.3px),3.09% calc(100% - 5.6px),1.97% calc(100% - 9.1px),0.00% calc(100% - 4.6px));
  --torn-c:polygon(0.00% 0.2px,1.36% 0.9px,3.34% 3.7px,5.04% 0.0px,6.18% 0.0px,7.56% 3.8px,8.95% 2.7px,11.07% 6.3px,12.25% 7.6px,14.34% 4.4px,15.90% 9.8px,17.04% 6.2px,19.16% 7.2px,19.95% 4.8px,22.19% 7.5px,23.71% 7.2px,25.03% 7.8px,26.45% 3.9px,28.42% 3.6px,30.01% 3.0px,31.43% 0.0px,32.57% 1.5px,34.00% 1.9px,35.58% 3.3px,37.62% 5.0px,38.95% 5.0px,40.42% 11.0px,42.32% 9.2px,43.45% 10.2px,45.01% 7.5px,47.32% 8.6px,48.49% 8.0px,50.31% 7.5px,51.32% 1.2px,52.96% 1.9px,54.43% 5.9px,56.59% 1.1px,57.95% 1.8px,59.75% 2.7px,60.73% 2.0px,62.56% 3.2px,64.14% 8.8px,65.53% 5.1px,67.64% 8.0px,68.38% 5.3px,69.96% 9.5px,72.14% 7.7px,73.04% 6.8px,75.45% 6.9px,76.99% 8.1px,77.69% 6.0px,79.85% 3.7px,81.04% 3.8px,82.46% 2.0px,84.33% 5.7px,86.28% 1.3px,87.50% 1.6px,89.43% 7.5px,90.44% 7.0px,92.29% 4.6px,93.99% 8.2px,95.56% 8.7px,96.43% 7.3px,98.01% 11.0px,100.00% 10.3px,100.00% calc(100% - 1.2px),98.04% calc(100% - 5.8px),97.28% calc(100% - 1.2px),95.30% calc(100% - 2.3px),93.98% calc(100% - 8.4px),91.85% calc(100% - 7.4px),90.67% calc(100% - 6.7px),89.40% calc(100% - 8.0px),87.24% calc(100% - 8.6px),86.14% calc(100% - 5.5px),84.21% calc(100% - 10.0px),82.95% calc(100% - 4.8px),81.27% calc(100% - 1.4px),79.44% calc(100% - 2.0px),78.20% calc(100% - 0.6px),76.31% calc(100% - 0.0px),75.12% calc(100% - 1.0px),73.80% calc(100% - 6.3px),71.49% calc(100% - 3.1px),70.46% calc(100% - 4.1px),68.42% calc(100% - 10.4px),67.25% calc(100% - 8.0px),65.88% calc(100% - 10.7px),63.78% calc(100% - 5.6px),62.44% calc(100% - 7.3px),60.91% calc(100% - 8.5px),59.53% calc(100% - 9.1px),57.45% calc(100% - 3.8px),56.11% calc(100% - 5.9px),54.46% calc(100% - 0.5px),53.08% calc(100% - 1.9px),51.36% calc(100% - 0.9px),50.38% calc(100% - 3.0px),48.76% calc(100% - 4.9px),46.47% calc(100% - 9.3px),45.61% calc(100% - 10.3px),44.13% calc(100% - 10.4px),41.89% calc(100% - 8.4px),40.37% calc(100% - 7.8px),38.67% calc(100% - 7.3px),37.94% calc(100% - 5.6px),36.19% calc(100% - 5.8px),34.31% calc(100% - 8.1px),33.26% calc(100% - 4.1px),31.45% calc(100% - 0.4px),29.50% calc(100% - 5.7px),28.20% calc(100% - 2.8px),26.79% calc(100% - 0.0px),25.08% calc(100% - 4.1px),23.75% calc(100% - 2.9px),22.29% calc(100% - 3.6px),20.03% calc(100% - 8.3px),18.91% calc(100% - 6.5px),16.85% calc(100% - 11.0px),15.40% calc(100% - 9.0px),14.17% calc(100% - 7.0px),12.58% calc(100% - 6.6px),11.33% calc(100% - 3.2px),9.57% calc(100% - 2.2px),7.72% calc(100% - 4.3px),6.07% calc(100% - 1.2px),4.91% calc(100% - 0.0px),3.09% calc(100% - 6.4px),2.01% calc(100% - 0.8px),0.00% calc(100% - 2.9px));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
main{overflow-x:clip}
body{margin:0;background:var(--desk) var(--grain);color:var(--ink-2);font:400 16px/2 var(--f-body);letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:clip;line-break:strict;text-autospace:normal}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
p,figure,ul,ol,h1,h2,h3,h4,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-weight:900;color:var(--ink);line-height:1.35}
p,li,figcaption,summary,h1,h2,h3,dd{word-break:keep-all;overflow-wrap:anywhere}
em{font-style:normal}
strong{font-weight:700;color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.skip{position:fixed;z-index:100;top:10px;left:10px;padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff;font:700 15px var(--f-label);transform:translateY(-200%)}
.skip:focus{transform:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.hand{font-family:var(--f-hand);letter-spacing:.02em}
.wrap{width:min(100% - var(--g)*2,var(--max));margin-inline:auto}

/* ---------- ヘッダー ---------- */
.hd{position:fixed;z-index:60;top:0;left:0;right:0;padding:12px clamp(10px,2vw,24px) 0;pointer-events:none}
.hd-bar{pointer-events:auto;position:relative;max-width:1320px;margin-inline:auto;display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);padding:7px 7px 7px 10px;background:#FFFDF7;border:2.5px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink);transition:transform .35s var(--soft)}
.brand{display:inline-flex;align-items:center;gap:10px;font:900 19px/1 var(--f-display);color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.brand img{width:44px;height:44px;border-radius:12px;border:2px solid var(--ink)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;font:700 15px/1 var(--f-label);color:var(--ink)}
.nav a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border-radius:999px;transition:background .2s}
.nav a:hover{background:color-mix(in srgb,var(--yellow) 40%,transparent)}
.nav a[aria-current="true"]{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--ink)}
.nav .dot{width:9px;height:9px;border-radius:50%;background:var(--c);border:1.5px solid var(--ink)}
.hd-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--red-ink);color:#fff;border:2.5px solid var(--ink);font:700 15px/1 var(--f-label);white-space:nowrap;transition:transform .2s var(--pop)}
.hd-cta svg{width:17px;height:17px;fill:currentColor}
.hd-cta:hover{transform:rotate(-4deg) scale(1.05)}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;border-radius:999px;border:2.5px solid var(--ink);background:var(--yellow);font:700 14px/1 var(--f-label);color:var(--ink)}
.menu-ico{position:relative;width:18px;height:12px}
.menu-ico i{position:absolute;left:0;right:0;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .3s var(--soft),top .3s var(--soft)}
.menu-ico i:first-child{top:1px}.menu-ico i:last-child{top:8px}
.menu-btn[aria-expanded="true"] .menu-ico i:first-child{top:5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-ico i:last-child{top:5px;transform:rotate(-45deg)}
.progress{position:fixed;top:0;left:0;right:0;height:5px;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--sky),var(--purple))}

/* ---------- 共通：ボタン・バッジ ---------- */
.store{display:inline-flex;align-items:center;gap:12px;min-height:64px;padding:10px 26px 10px 20px;border-radius:20px;background:var(--ink);color:#fff;font:700 19px/1.2 var(--f-label);letter-spacing:.02em;box-shadow:0 5px 0 #000}
.store svg{width:30px;height:30px;fill:currentColor;flex:none}
.store small{display:block;font-size:12px;opacity:.75;letter-spacing:.04em;margin-bottom:3px}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:0 24px;border-radius:999px;background:#fff;border:2.5px solid var(--ink);box-shadow:0 5px 0 var(--ink);font:700 17px/1 var(--f-label);color:var(--ink);transition:transform .2s,box-shadow .2s}
.btn-ghost svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn-ghost:hover svg{animation:nudge .8s var(--soft) infinite}
@keyframes nudge{50%{transform:translateY(4px)}}

/* ---------- 見出し・章 ---------- */
.h2{font:900 clamp(36px,6.1vw,88px)/1.16 var(--f-display);letter-spacing:-.01em;font-feature-settings:"palt";margin:20px 0 26px;text-spacing-trim:trim-start}
.h3{font:900 clamp(24px,2.7vw,38px)/1.3 var(--f-display);font-feature-settings:"palt";letter-spacing:0}
.hl{background:linear-gradient(var(--hl),var(--hl)) 0 88%/100% 32% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em}
.js .split .hl{background-size:0 32%;transition:background-size .9s var(--soft) .45s}
.js .split.in .hl{background-size:100% 32%}
.chap{position:relative;max-width:880px;margin-bottom:clamp(44px,6vw,84px)}
.chap.center{margin-inline:auto;text-align:center}
.chap[data-num]::after{content:attr(data-num);position:absolute;z-index:-1;right:calc(min(100vw - var(--g)*2, var(--max)) * -1 + 100% + 10px);top:-30px;font:900 clamp(200px,24vw,340px)/.8 var(--f-display);color:color-mix(in srgb,var(--sheet) 82%,var(--ink));-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:9px 11px 0 var(--ink);transform:rotate(8deg);pointer-events:none}
.chap.center[data-num]::after{right:calc((100% - min(100vw - var(--g)*2, var(--max))) / 2 + 10px);top:-20px}
.color-top .chap[data-num]::after{display:none}
.chap-label{display:inline-flex;align-items:center;gap:14px;font:700 19px/1 var(--f-label);color:var(--ink);letter-spacing:.06em}
.chap-num{display:grid;place-items:center;width:58px;height:58px;font:900 32px/1 var(--f-display);color:#fff;background:var(--acc,var(--ink));border:2.5px solid var(--ink);border-radius:52% 48% 55% 45%/48% 55% 45% 52%;box-shadow:3px 3px 0 var(--ink);transform:rotate(-8deg)}
.s-peach .chap-num{color:var(--ink)}
.chap-label.plain span{display:inline-block;padding:10px 18px;border-radius:999px;background:var(--acc,var(--ink));color:#fff;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.lead{font-size:clamp(16px,1.25vw,18.5px);line-height:2.05;color:var(--ink-2);max-width:42em}
.chap.center .lead{margin-inline:auto}

/* 文字ごとの出現（JSで分割） */
.ph{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
.js .split .ch{opacity:0;transform:translateY(.55em) scale(.5) rotate(10deg);transition:transform .75s var(--pop) calc(var(--i)*32ms),opacity .35s calc(var(--i)*32ms)}
.js .split.in .ch{opacity:1;transform:rotate(var(--rot,0deg))}

/* 表示アニメーション */
.js .rv{opacity:0;transform:translateY(46px) rotate(var(--r,0deg));transition:opacity .8s var(--soft),transform 1s var(--soft)}
.js .rv.in{opacity:1;transform:rotate(var(--r,0deg))}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

.bob{animation:bob 4.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(3deg)}}
.par{will-change:transform}

/* ---------- 画用紙のシート ---------- */
.sheet{position:relative;isolation:isolate;margin:clamp(18px,2.4vw,34px) clamp(6px,1.3vw,20px);padding:clamp(80px,9.5vw,150px) 0 clamp(80px,9vw,140px)}
.sheet::before,.sheet::after{content:"";position:absolute;inset:0;clip-path:var(--torn,var(--torn-a))}
.sheet::before{z-index:-1;background:var(--sheet) var(--grain)}
.sheet::after{z-index:-2;background:rgba(90,58,24,.13);transform:translate(4px,7px)}
.s-yellow{--sheet:#FFE45E;--acc:var(--red);--torn:var(--torn-a)}
.s-sky{--sheet:#9DD6FF;--acc:var(--blue);--torn:var(--torn-b)}
.s-pink{--sheet:#FFC4DA;--acc:#E8457F;--torn:var(--torn-c)}
.s-peach{--sheet:#FFDDB8;--acc:var(--orange);--torn:var(--torn-a)}
.s-mint{--sheet:#BDEFD6;--acc:#1E9A57;--torn:var(--torn-b)}
.s-white{--sheet:#FFFFFF;--acc:#0F9488;--torn:var(--torn-c)}
.s-lavender{--sheet:#E3DBFF;--acc:#7B57F5;--torn:var(--torn-a)}

/* 白いカード（インクのふち＋ずらした影） */
.card,.bc,.toolbox,.pg-box,.note-card,.trust,.settings,.faq-list details,.cta-card{background:#fff;border:2.5px solid var(--ink);border-radius:28px;box-shadow:6px 7px 0 var(--ink)}

/* ---------- ヒーロー ---------- */
.hero{position:relative;overflow:clip;padding:clamp(108px,12vw,150px) 0 clamp(40px,6vw,80px)}
.hero-grid{position:relative;width:min(100% - var(--g)*2,1320px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:center}
.hero-copy{position:relative;z-index:4}
.hero-tag{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border-radius:999px;background:#fff;border:2px solid var(--ink);font:700 14.5px/1.4 var(--f-label);color:var(--ink);letter-spacing:.04em}
.tag-ico{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--red),var(--orange),var(--yellow),var(--green),var(--sky),var(--purple),var(--red));border:2px solid var(--ink)}
.h1{font:900 clamp(40px,calc(7vw - 4px),98px)/1.1 var(--f-display);letter-spacing:-.02em;font-feature-settings:"palt";margin:26px 0 30px}
.h1 .ln{display:block;white-space:nowrap}
.h1 .w{display:inline-block}
.h1-ico{display:inline-block;width:.66em;height:auto;vertical-align:.02em;margin-left:.08em}
.i1{transform:rotate(-12deg)}.i2{transform:rotate(10deg)}
.js .h1-ico{opacity:0;transform:scale(.3) rotate(-40deg);transition:transform .8s var(--pop),opacity .4s}
.js .hero.ready .h1-ico{opacity:1}
.js .hero.ready .i1{transform:rotate(-12deg);transition-delay:.35s}
.js .hero.ready .i2{transform:rotate(10deg);transition-delay:.6s}
.hero.ready .i1{animation:wiggle 3.6s ease-in-out 1.6s infinite}
.hero.ready .i2{animation:wave 2.4s ease-in-out 1.9s infinite}
@keyframes wiggle{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-2deg) translate(4px,-6px)}}
@keyframes wave{0%,100%{transform:rotate(10deg)}25%{transform:rotate(-6deg)}50%{transform:rotate(14deg)}}
.w3{letter-spacing:-.04em}
.w3 .ch{color:var(--c,var(--red));-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.05em .06em 0 var(--ink);padding-right:.01em}
.w3:not(.split){color:var(--red)}
.w3 .ch:hover{animation:boing .6s var(--pop)}
@keyframes boing{40%{transform:translateY(-.18em) rotate(-8deg) scale(1.08)}}
.hero-lead{font-size:clamp(16px,1.4vw,20px);line-height:2.05;color:var(--ink-2);max-width:31em}
.mk{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--yellow) 85%,transparent) 60% 92%,transparent 92%);padding:0 .1em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:32px}
.hanko{display:flex;gap:12px;margin-top:28px}
.hanko li{display:grid;place-content:center;width:76px;height:76px;border-radius:50%;color:var(--c);border:3px solid var(--c);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--c);background:rgba(255,255,255,.75);font:700 21px/1 var(--f-label);text-align:center;transform:rotate(var(--r));letter-spacing:.06em}
.hanko small{display:block;font-size:12px;margin-bottom:5px;letter-spacing:.12em}
.js .hanko li{opacity:0;transform:rotate(var(--r)) scale(1.9);transition:transform .5s cubic-bezier(.5,0,.2,1.4),opacity .2s}
.js .hero.ready .hanko li{opacity:1;transform:rotate(var(--r)) scale(1)}
.js .hero.ready .hanko li:nth-child(1){transition-delay:1.25s}
.js .hero.ready .hanko li:nth-child(2){transition-delay:1.42s}
.js .hero.ready .hanko li:nth-child(3){transition-delay:1.59s}
.hero-note{margin-top:22px;font-size:13.5px;line-height:1.9;color:var(--muted)}

.hero-stage{position:relative;aspect-ratio:1.06/1;z-index:2}
.hero-rainbow{position:absolute;left:-10%;top:-6%;width:118%;height:auto;z-index:0;overflow:visible}
.rb{stroke:var(--c);stroke-width:27;stroke-dasharray:1 1;stroke-dashoffset:0}
.js .rb{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.5,0,.2,1) calc(var(--d) + .5s)}
.js .hero.ready .rb{stroke-dashoffset:0}
.par{position:absolute}
.dev-ipad{left:3%;top:15%;width:86%;z-index:2}
.dev-iphone{left:-3%;top:46%;width:23%;z-index:3}
.hero-chara{right:-6%;bottom:-3%;width:35%;z-index:4}
.st{width:13%;z-index:5}
.st img{width:100%}
.st-sun{left:24%;top:-1%}
.st-cloud{left:44%;top:5%;width:15%;z-index:1}
.st-star{right:2%;top:5%;width:11%}
.st-heart{left:56%;bottom:7%;width:10%}
.st-rocket{right:-2%;top:36%;width:12%}
.st-fish{left:19%;bottom:3%;width:12%}
.st-butterfly{left:70%;top:-2%;width:10%}
.js .hero-stage .par>*{opacity:0;transform:translateY(40px) scale(.6);transition:transform 1s var(--pop),opacity .5s}
.js .hero.ready .hero-stage .par>*{opacity:1;transform:none}
.js .hero.ready .dev-ipad>*{transition-delay:.1s}
.js .hero.ready .dev-iphone>*{transition-delay:.4s}
.js .hero.ready .hero-chara>*{transition-delay:.7s}
.js .hero.ready .st-sun>*{transition-delay:.9s}.js .hero.ready .st-cloud>*{transition-delay:1s}
.js .hero.ready .st-star>*{transition-delay:1.1s}.js .hero.ready .st-heart>*{transition-delay:1.2s}
.js .hero.ready .st-rocket>*{transition-delay:1.3s}.js .hero.ready .st-fish>*{transition-delay:1.4s}
.js .hero.ready .st-butterfly>*{transition-delay:1.5s}
.hero.ready .st .bob,.hero.ready .hero-chara .bob{animation:bob 4.8s ease-in-out infinite}
.st-cloud .bob{animation-duration:6.5s!important}.st-star .bob{animation-duration:3.6s!important}.st-rocket .bob{animation-duration:4.1s!important}.st-fish .bob{animation-duration:5.4s!important}

/* 端末（子ども用のカラフルなケース） */
.dev{position:relative;background:var(--case,#FFC93C);padding:var(--pad,2.6%);border:2.5px solid var(--ink);border-radius:var(--rad,6.2%/8.3%);box-shadow:inset 0 -7px 0 rgba(0,0,0,.13),6px 8px 0 var(--ink)}
.dev img,.dev video{width:100%;border-radius:var(--irad,2.6%/3.5%);border:2px solid var(--ink);background:#f5ecdc}
.dev.ipad{--case:#FFC93C}
.dev.iphone{--case:#FF7A66;--pad:5%;--rad:17%/8%;--irad:12%/5.6%}
.dev-ipad .dev{transform:rotate(-4deg)}
.dev-iphone .dev{transform:rotate(8deg)}

/* ---------- 数字の帯 ---------- */
.ticker{position:relative;z-index:5;margin:clamp(10px,2vw,30px) -3vw clamp(-6px,-1vw,0px);padding:16px 0;background:var(--red);border-block:3px solid var(--ink);transform:rotate(-2.2deg);overflow:hidden;color:#fff}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker-set{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);padding-right:clamp(18px,2.4vw,34px)}
.ticker span{font:900 clamp(24px,3.2vw,44px)/1 var(--f-display);white-space:nowrap;letter-spacing:.02em;-webkit-text-stroke:.03em var(--ink);paint-order:stroke fill}
.ticker b{font-size:1.45em;margin:0 .12em;color:var(--yellow);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.05em .05em 0 var(--ink)}
.ticker img{width:clamp(44px,5vw,68px);height:auto;flex:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- 1 かく ---------- */
.draw-hero{position:relative;width:min(100%,940px);margin:0 auto clamp(60px,8vw,110px)}
.draw-hero .dev{--case:#fff;transform:rotate(-1.2deg)}
.draw-note{position:absolute;right:-4%;top:-78px;font-size:clamp(16px,1.6vw,21px);line-height:1.5;color:var(--ink);transform:rotate(4deg);text-align:right}
.draw-note svg{width:56px;height:auto;margin:4px 0 0 auto;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.draw-st{width:clamp(70px,10vw,130px);z-index:3}
.draw-st img{width:100%}
.st-balloon{left:-7%;top:12%}
.st-cake{right:-6%;bottom:6%}

.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-bottom:clamp(28px,4vw,48px)}
.bc{position:relative;padding:clamp(24px,2.6vw,38px);overflow:hidden;min-width:0}
.bc-pen{grid-column:span 7}
.bc-magic{grid-column:span 5;background:#F1ECFF}
.bc-stamp{grid-column:span 12;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:center;background:#FFFDF4}
.bc-shape{grid-column:span 5;background:#EAF6FF}
.bc-color{grid-column:span 7;background:#FFF1EB}
.bc-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px;position:relative;z-index:2;padding-right:clamp(64px,8vw,112px)}
.bc h3{font:900 clamp(26px,2.6vw,36px)/1.25 var(--f-display);font-feature-settings:"palt"}
.bc p{position:relative;z-index:2;font-size:15.5px;line-height:1.95;max-width:30em}
.bc .num,.num{font:900 clamp(66px,7.4vw,112px)/.82 var(--f-display);color:var(--nc,var(--red));-webkit-text-stroke:.03em var(--ink);paint-order:stroke fill;text-shadow:.04em .05em 0 var(--ink);letter-spacing:-.02em}
.num small{font:700 17px/1 var(--f-label);color:var(--ink);-webkit-text-stroke:0;text-shadow:none;margin-left:6px;letter-spacing:.04em}
.bc-pen{--nc:var(--red)}.bc-magic{--nc:var(--purple)}.bc-stamp{--nc:var(--green)}.bc-shape{--nc:var(--sky)}
.bc-tool{position:absolute;right:clamp(10px,2vw,26px);top:clamp(12px,2vw,24px);width:clamp(76px,8.4vw,118px);transform:rotate(12deg);transition:transform .5s var(--pop);z-index:1}
.bc:hover .bc-tool{transform:rotate(-8deg) scale(1.12)}
.ui-strip{position:relative;z-index:2;margin-top:22px;border-radius:16px;border:2px solid var(--ink);background:#FFF8EA;overflow:hidden;height:clamp(58px,5.4vw,78px)}
.ui-roll{display:flex;width:max-content;height:100%;animation:roll 34s linear infinite}
.ui-roll img{height:100%;width:auto;max-width:none}
.bc-magic .ui-roll{animation-duration:40s}
@keyframes roll{to{transform:translateX(-50%)}}
.bc-lines{width:100%;max-width:360px;margin-top:18px;position:relative;z-index:2;overflow:visible}
.dl{stroke-dashoffset:0}
.js .dl{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1) var(--dl-d,0s)}
.js .bc.in .dl{stroke-dashoffset:0}
.js .bc .dl[stroke-dasharray]{stroke-dashoffset:0;transition:none}
.bc-magic .bc-chara{position:absolute;right:6px;top:4px;width:clamp(120px,11vw,160px);z-index:1;transition:transform .6s var(--pop)}
.bc-magic:hover .bc-chara{transform:rotate(-8deg) translateY(-8px)}
.bc-magic .bc-head{padding-right:clamp(100px,11vw,150px)}
.bc-magicline{position:relative;z-index:2;width:100%;max-width:440px;margin-top:20px;overflow:visible}
.mstars path{transform-box:fill-box;transform-origin:center}
.js .mstars path{transform:scale(0) rotate(-90deg);transition:transform .6s var(--pop) var(--sd)}
.js .bc.in .mstars path{transform:none}
.bc-magic:hover .mstars path{animation:twinkle 1.2s ease-in-out infinite}
.sparkle{position:absolute;width:22px;height:22px;background:var(--yellow);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:twinkle 2.2s ease-in-out infinite;z-index:1}
.sparkle.s1{right:40%;top:16%}.sparkle.s2{right:12%;top:38%;width:14px;height:14px;animation-delay:.6s;background:var(--pink)}.sparkle.s3{right:30%;top:48%;width:16px;height:16px;animation-delay:1.2s;background:var(--sky)}
@keyframes twinkle{50%{transform:scale(.3) rotate(45deg);opacity:.4}}
.shapes{width:100%;max-width:320px;margin-top:22px;overflow:visible}
.sh{transform-box:fill-box;transform-origin:center}
.js .sh{transform:scale(0) rotate(-40deg);transition:transform .7s var(--pop) var(--sh-d,0s)}
.js .bc.in .sh{transform:none}
.bc-shape:hover .sh{animation:jump .6s var(--pop) calc(var(--sh-d,0s) / 2)}
@keyframes jump{40%{transform:translateY(-12px) rotate(-8deg)}}
.palette{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:2}
.palette li{width:clamp(32px,3vw,40px);aspect-ratio:1;border-radius:50%;background:var(--c);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.js .palette li{transform:scale(0);transition:transform .5s var(--pop)}
.js .bc.in .palette li{transform:none}
.js .bc.in .palette li:nth-child(2){transition-delay:.05s}.js .bc.in .palette li:nth-child(3){transition-delay:.1s}.js .bc.in .palette li:nth-child(4){transition-delay:.15s}.js .bc.in .palette li:nth-child(5){transition-delay:.2s}.js .bc.in .palette li:nth-child(6){transition-delay:.25s}.js .bc.in .palette li:nth-child(7){transition-delay:.3s}.js .bc.in .palette li:nth-child(8){transition-delay:.35s}.js .bc.in .palette li:nth-child(9){transition-delay:.4s}.js .bc.in .palette li:nth-child(10){transition-delay:.45s}
.palette li:hover{transform:translateY(-6px)!important}
.bc-stamp-text{position:relative;min-width:0}
.bc-stamp .bc-chara{display:block;width:clamp(150px,15vw,220px);margin-top:18px;transition:transform .5s var(--pop)}
.bc-stamp:hover .bc-chara{transform:translateY(-10px) rotate(-4deg)}
.stamp-pad{position:relative;min-width:0}
.stamp-try{position:absolute;right:4px;top:-34px;font-size:17px;color:#17703F;transform:rotate(-3deg);display:none}
@media (hover:hover) and (pointer:fine) and (min-width:981px){.stamp-try{display:block}.bc-stamp{cursor:pointer}}
.pressed{position:absolute;z-index:4;width:72px;height:72px;margin:-36px 0 0 -36px;pointer-events:none;animation:press 2.6s cubic-bezier(.5,0,.3,1.4) both}
@keyframes press{0%{opacity:0;transform:scale(2.2) rotate(var(--pr))}12%{opacity:1;transform:scale(.86) rotate(0)}20%{transform:scale(1.04)}26%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9) translateY(8px)}}
.stamp-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.8vw,12px)}
.stamp-grid li{aspect-ratio:1;display:grid;place-items:center;border-radius:16px;transition:background .2s}
.stamp-grid img{width:88%;transition:transform .35s var(--pop)}
.stamp-grid li:nth-child(-n+4) img{width:118%;max-width:none}
.stamp-grid li:hover{background:color-mix(in srgb,var(--yellow) 30%,transparent)}
.stamp-grid li:hover img{transform:scale(1.3) rotate(-10deg)}
.js .stamp-grid img{opacity:0;transform:scale(1.8) rotate(var(--sr,8deg))}
.js .stamp-grid.in img{animation:stampin .45s cubic-bezier(.5,0,.3,1.5) calc(var(--i)*45ms) both}
.js .stamp-grid.in li:hover img{transform:scale(1.3) rotate(-10deg)}
@keyframes stampin{0%{opacity:0;transform:scale(1.8) rotate(var(--sr,8deg))}60%{opacity:1;transform:scale(.88) rotate(0)}100%{opacity:1;transform:none}}

.toolbox{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(24px,3vw,44px)}
.toolbox-head p{margin-top:14px;font-size:15px;line-height:1.95}
.tools{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(6px,1vw,14px)}
.tools li{display:grid;justify-items:center;gap:6px;font:700 13px/1.3 var(--f-label);color:var(--ink);text-align:center;white-space:nowrap;letter-spacing:0}
.tools img{width:100%;max-width:96px;transform:rotate(var(--r));transition:transform .4s var(--pop)}
.tools li:hover img{transform:rotate(0) translateY(-10px) scale(1.12)}

/* ---------- 2 あそぶ ---------- */
.motion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-bottom:clamp(60px,8vw,110px)}
.motion:nth-child(1){--r:-1.2deg}.motion:nth-child(2){--r:1.2deg}
.motion-frame{position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:30px;padding:12px;box-shadow:6px 8px 0 var(--ink)}
.motion-frame video{width:100%;border-radius:20px;border:2px solid var(--ink);background:#dcecf5}
.motion-pill{position:absolute;left:28px;top:-18px;padding:8px 18px;border-radius:999px;background:var(--yellow);border:2.5px solid var(--ink);font:700 16px/1 var(--f-label);color:var(--ink);transform:rotate(-4deg)}
.motion figcaption{padding:22px 8px 0}
.motion figcaption strong{display:block;font:700 clamp(18px,1.6vw,22px)/1.55 var(--f-label);color:var(--ink);margin-bottom:6px}
.motion figcaption span{font-size:15px;line-height:1.9}

.pg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(70px,9vw,120px)}
.pg-kicker{display:inline-block;font-size:22px;color:#A8261A;transform:rotate(-4deg);margin-bottom:6px}
.pg-copy .h3{margin-bottom:18px}
.pg-copy p{font-size:15.5px;line-height:1.95}
.pg-copy .pg-note{margin-top:14px;font-size:13px;line-height:1.85;color:var(--ink-2)}
.pg-box{padding:clamp(12px,1.4vw,18px);border-radius:32px;transform:rotate(.8deg)}
.pg-stage{position:relative;aspect-ratio:4/3;border-radius:20px;border:2px solid var(--ink);overflow:hidden;background:#fff}
.pg-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pg-paper{background:#fff var(--grain);touch-action:none;cursor:var(--crayon-cursor),crosshair}
.pg-world{opacity:0;visibility:hidden;transform:scale(1.06);transition:opacity .5s,transform .7s var(--soft),visibility 0s .7s;cursor:pointer;touch-action:manipulation}
.pg-box[data-mode="play"] .pg-world{opacity:1;visibility:visible;transform:none;transition:opacity .5s,transform .7s var(--soft)}
.pg-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);font-size:clamp(22px,3vw,34px);color:#9C9087;pointer-events:none;white-space:nowrap;transition:opacity .3s}
.pg-hint::after{content:"";position:absolute;left:-30%;right:-30%;top:-80%;bottom:-80%;border:3px dashed #D9D0C6;border-radius:50%;z-index:-1}
.pg-box.drawn .pg-hint,.pg-box[data-mode="play"] .pg-hint{opacity:0}
.pg-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:14px 4px 4px}
.pg-colors{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;min-width:0}
.pg-colors label{position:relative;width:38px;height:38px;border-radius:50%;background:var(--c);border:2.5px solid var(--ink);cursor:pointer;transition:transform .2s var(--pop)}
.pg-colors input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pg-colors label:has(input:checked){transform:translateY(-5px) scale(1.08);box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--ink)}
.pg-colors label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:6px}
.pg-btns{display:flex;flex-wrap:wrap;gap:10px}
.pg-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:2.5px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);font:700 16px/1 var(--f-label);color:var(--ink);transition:transform .15s,box-shadow .15s}
.pg-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.pg-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.pg-btn.primary{background:var(--red-ink);color:#fff}
.pg-btn svg{width:16px;height:16px;fill:currentColor}
.pg-box[data-mode="play"] .pg-play,.pg-box[data-mode="play"] .pg-clear,.pg-box[data-mode="play"] .pg-colors{display:none}
.pg-box[data-mode="play"] .pg-more,.pg-box[data-mode="play"] .pg-feed{display:inline-flex}
.pg-more[hidden],.pg-feed[hidden]{display:none}
.pg-feed{background:var(--yellow)}

.worlds-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 30px;margin-bottom:30px}
.worlds-head p{font-size:15.5px}
.big-num{font:900 1.6em/1 var(--f-display);color:var(--sky-ink);-webkit-text-stroke:.03em var(--ink);paint-order:stroke fill;margin:0 .06em;vertical-align:-.1em}
.world-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.world{background:#fff;border:2.5px solid var(--ink);border-radius:20px;padding:8px 8px 14px;box-shadow:4px 5px 0 var(--ink);transform:rotate(var(--r));transition:transform .35s var(--pop)}
.world img{width:100%;border-radius:12px;border:2px solid var(--ink);aspect-ratio:400/238;object-fit:cover}
.world b{display:block;margin:10px 6px 0;font:700 16px/1.4 var(--f-label);color:var(--ink)}
.world span{display:block;margin:2px 6px 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.world:hover{transform:rotate(0) translateY(-8px) scale(1.04)}
.play-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(28px,4vw,44px)}
.note-card{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:24px;box-shadow:4px 5px 0 var(--ink)}
.note-card svg{width:40px;height:40px;flex:none;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.note-card p{font-size:15px;line-height:1.9}
.note-card strong{display:block;font:700 17px/1.5 var(--f-label);margin-bottom:4px}

/* ---------- 3 ぬりえ ---------- */
.color-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(60px,8vw,110px)}
.color-top .chap{margin-bottom:0}
.coloring-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.coloring-tags li{display:inline-flex;align-items:baseline;gap:6px;padding:8px 18px;border-radius:999px;background:#fff;border:2.5px solid var(--ink);font:700 15px/1.2 var(--f-label);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.coloring-tags b{font:900 24px/1 var(--f-display);color:#E23D7E;-webkit-text-stroke:.03em var(--ink);paint-order:stroke fill}
.rocket-demo{position:relative;max-width:470px;margin-inline:auto;width:100%}
.rd-paper{position:relative;container-type:size;aspect-ratio:3/4;background:#fff var(--grain);border:2.5px solid var(--ink);border-radius:26px;box-shadow:8px 10px 0 var(--ink);transform:rotate(2.4deg);overflow:hidden}
.rd-svg{position:absolute;inset:4% 6%;width:88%;height:92%;overflow:visible}
.fl{transform-box:fill-box;transform-origin:center;transform:scale(1)}
.rd-flame{opacity:0;transform-box:fill-box;transform-origin:50% 0}
.rd-smoke circle{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
.rd-bucket{position:absolute;width:24%;left:0;top:0;opacity:0;transform-origin:20% 80%;margin:-19.7% 0 0 -4.3%;pointer-events:none;will-change:transform}
.rd-count{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rd-count span{grid-area:1/1;font:900 clamp(60px,9vw,110px)/1 var(--f-display);color:var(--yellow);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.05em .06em 0 var(--ink);opacity:0;transform:scale(.4)}
.rd-count .go{font-size:clamp(34px,4.6vw,58px);color:var(--red);transform:rotate(-8deg) scale(.4);margin-top:-40%}
.rd-chara{position:absolute;left:-22%;bottom:-8%;width:46%;z-index:3;transform:rotate(-4deg)}
.js .rocket-demo .fl{transform:scale(0)}
.rocket-demo.run .fl{animation:flood .7s cubic-bezier(.3,.7,.4,1) calc(var(--o) * 1s + .6s) both}
@keyframes flood{from{transform:scale(0)}to{transform:scale(1)}}
.rocket-demo.run .rd-bucket{animation:bucket 6.4s linear both}
@keyframes bucket{
  0%{opacity:0;transform:translate(110cqw,12cqh) rotate(-14deg)}
  3%{opacity:1}
  7%,8.6%{transform:translate(50cqw,19cqh) rotate(-14deg)}9.6%{transform:translate(50cqw,19cqh) rotate(-34deg) scale(.9)}11.7%{transform:translate(50cqw,19cqh) rotate(-14deg)}
  22.7%,24.2%{transform:translate(60cqw,62cqh) rotate(-14deg)}25.2%{transform:translate(60cqw,62cqh) rotate(-34deg) scale(.9)}27.3%{transform:translate(60cqw,62cqh) rotate(-14deg)}
  38.3%,39.8%{transform:translate(50cqw,46cqh) rotate(-14deg)}40.8%{transform:translate(50cqw,46cqh) rotate(-34deg) scale(.9)}43%{transform:translate(50cqw,46cqh) rotate(-14deg)}
  53.9%,55.5%{transform:translate(23cqw,66cqh) rotate(-14deg)}56.5%{transform:translate(23cqw,66cqh) rotate(-34deg) scale(.9)}58.6%{transform:translate(23cqw,66cqh) rotate(-14deg)}
  69.5%,71.1%{transform:translate(78cqw,66cqh) rotate(-14deg)}72.1%{transform:translate(78cqw,66cqh) rotate(-34deg) scale(.9)}74.2%{transform:translate(78cqw,66cqh) rotate(-14deg)}
  85.2%,86.7%{transform:translate(50cqw,76cqh) rotate(-14deg)}87.7%{transform:translate(50cqw,76cqh) rotate(-34deg) scale(.9)}89.8%{transform:translate(50cqw,76cqh) rotate(-14deg);opacity:1}
  100%{opacity:0;transform:translate(112cqw,94cqh) rotate(-14deg)}
}
.rocket-demo.run .rd-count span{animation:count .6s var(--pop) both}
.rocket-demo.run .rd-count span:nth-child(1){animation-delay:6.6s}
.rocket-demo.run .rd-count span:nth-child(2){animation-delay:7.2s}
.rocket-demo.run .rd-count span:nth-child(3){animation-delay:7.8s}
.rocket-demo.run .rd-count .go{animation:go 2.6s var(--pop) 8.4s both}
@keyframes count{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.1)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes go{0%{opacity:0;transform:rotate(-8deg) scale(.4)}12%{opacity:1;transform:rotate(-8deg) scale(1.12)}20%,85%{opacity:1;transform:rotate(-8deg) scale(1)}100%{opacity:0;transform:rotate(-8deg) scale(1)}}
.rocket-demo.run .rd-rocket{animation:launch 1.9s cubic-bezier(.55,0,.8,.2) 8.5s both}
@keyframes launch{0%{transform:none}8%{transform:translate(-3px,0)}16%{transform:translate(3px,-2px)}24%{transform:translate(-2px,-4px)}100%{transform:translateY(-470px)}}
.rocket-demo.run .rd-flame{animation:flame .16s 8.5s infinite alternate forwards}
@keyframes flame{from{opacity:1;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1.15)}}
.rocket-demo.run .rd-smoke circle{animation:smoke 1.6s ease-out 8.6s both}
.rocket-demo.run .rd-smoke circle:nth-child(2){animation-delay:8.75s}
.rocket-demo.run .rd-smoke circle:nth-child(3){animation-delay:8.9s}
@keyframes smoke{0%{transform:scale(0);opacity:1}60%{opacity:1}100%{transform:scale(1.9) translateY(-6px);opacity:0}}

.steps{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:end}
.step{position:relative}
.step:nth-child(1){--r:-2deg}.step:nth-child(2){--r:1.2deg}.step:nth-child(3){--r:-1deg}
.step .dev.iphone{--case:#8E6BFF;width:min(100%,250px);margin-inline:auto}
.step .dev.ipad{--case:#fff}
.step-no{position:absolute;z-index:3;left:-10px;top:-22px;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:900 30px/1 var(--f-display)}
.step-txt{margin-top:24px;text-align:center}
.step-txt strong{display:block;font:900 clamp(22px,2vw,28px)/1.3 var(--f-display)}
.step-txt span{display:block;font-size:14.5px;line-height:1.8;margin-top:4px}

/* ---------- 4 なかま ---------- */
.friend-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.friend{position:relative;padding:clamp(18px,2vw,26px) clamp(18px,1.8vw,24px) clamp(24px,2.4vw,32px);background:var(--fc);border:2.5px solid var(--ink);border-radius:32px;box-shadow:6px 7px 0 var(--ink);text-align:center;transform-style:preserve-3d}
.friend:nth-child(odd){--r:-1.5deg}.friend:nth-child(even){--r:1.5deg}
.friend-art{position:relative;width:min(84%,210px);margin:18px auto 8px;aspect-ratio:1;border-radius:50%;background:#fff;border:2.5px solid var(--ink)}
.friend-art img{position:absolute;left:-6%;top:-10%;width:112%;max-width:none;transition:transform .5s var(--pop)}
.friend:hover .friend-art img{transform:translateY(-10px) rotate(-5deg) scale(1.05)}
.bubble{position:absolute;right:-8px;top:-18px;z-index:2;padding:8px 14px;border-radius:18px;background:#fff;border:2.5px solid var(--ink);font-size:16px;line-height:1.4;color:var(--ink);transform:rotate(4deg);white-space:nowrap}
.bubble::after{content:"";position:absolute;left:24px;bottom:-11px;width:16px;height:16px;background:#fff;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg) skew(10deg,10deg)}
.friend h3{font:900 clamp(28px,2.6vw,36px)/1.2 var(--f-display);margin-top:10px}
.role{display:inline-block;white-space:nowrap;margin:8px 0 12px;padding:5px 14px;border-radius:999px;background:#fff;border:2px solid var(--ink);font:700 13px/1.4 var(--f-label);color:var(--fi)}
.friend p{font-size:14.5px;line-height:1.9;text-align:left}
.friends-note{margin-top:34px;text-align:center;font-size:14.5px;color:var(--ink-2)}

/* ---------- 5 のこす ---------- */
.gallery{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:clamp(26px,3vw,44px) clamp(24px,3vw,48px);margin-bottom:clamp(50px,7vw,90px)}
.frame{position:relative;background:#fff;padding:clamp(10px,1.2vw,16px) clamp(10px,1.2vw,16px) clamp(46px,4.4vw,60px);border:2.5px solid var(--ink);border-radius:10px;box-shadow:6px 8px 0 var(--ink)}
.frame img{width:100%;border:2px solid var(--ink);border-radius:4px}
.frame figcaption{position:absolute;left:0;right:0;bottom:clamp(8px,1vw,14px);text-align:center;font-size:clamp(17px,1.7vw,24px);line-height:1.3;color:var(--ink)}
.f-main{grid-row:span 2;align-self:center}
.f-sub1{align-self:end}
.tape{position:absolute;z-index:2;width:clamp(80px,9vw,120px);height:30px;background:repeating-linear-gradient(45deg,rgba(255,111,168,.55) 0 8px,rgba(255,255,255,.5) 8px 16px);border-left:2px dashed rgba(255,255,255,.7);border-right:2px dashed rgba(255,255,255,.7)}
.tape.t1{left:-18px;top:14px;transform:rotate(-38deg)}
.tape.t2{right:-18px;top:14px;transform:rotate(36deg);background:repeating-linear-gradient(45deg,rgba(59,167,255,.5) 0 8px,rgba(255,255,255,.5) 8px 16px)}
.memo-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.memo{position:relative;padding:30px 22px 26px;background:var(--mc);border:2.5px solid var(--ink);border-radius:6px 6px 26px 6px;box-shadow:5px 6px 0 var(--ink)}
.memo::before{content:"";position:absolute;left:50%;top:-12px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--red);border:2.5px solid var(--ink);box-shadow:inset -4px -4px 0 rgba(0,0,0,.18)}
.memo strong{display:block;font:700 18px/1.45 var(--f-label);margin-bottom:8px}
.memo span{display:block;font-size:14.5px;line-height:1.9;color:var(--ink-2)}

/* ---------- 保護者の方へ ---------- */
.parents-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.trust{padding:24px 24px 26px;border-radius:24px;border-width:2px;box-shadow:4px 5px 0 var(--ink);background:color-mix(in srgb,var(--tc) 9%,#fff)}
.trust svg{width:52px;height:52px;padding:10px;border-radius:16px;background:var(--tc);border:2px solid var(--ink);fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.trust h3{font:700 18px/1.5 var(--f-label);margin-bottom:6px}
.trust p{font-size:14.5px;line-height:1.9}
.settings{margin-top:clamp(18px,2.4vw,28px);padding:clamp(22px,2.6vw,34px);border-radius:26px;border-width:2px;box-shadow:4px 5px 0 var(--ink)}
.settings h3{font:700 19px/1.5 var(--f-label);margin-bottom:14px}
.settings ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px}
.settings li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.8}
.settings li::before{content:"";position:absolute;left:0;top:.3em;width:19px;height:19px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.settings p{margin-top:16px;padding-top:14px;border-top:2px dashed #E4D9C9;font-size:14px;line-height:1.85}
.backup{margin-top:clamp(18px,2.4vw,28px);padding:22px 24px 22px 74px;position:relative;border-radius:22px;background:#FFF6C9;border:2px solid var(--ink)}
.backup::before{content:"!";position:absolute;left:22px;top:22px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);font:900 20px/1 var(--f-display);color:var(--ink)}
.backup strong{display:block;font:700 17px/1.5 var(--f-label);margin-bottom:4px}
.backup p{font-size:14.5px;line-height:1.9}
.parents-shot{position:sticky;top:120px}
.parents-shot .dev{--case:#12A89D;transform:rotate(1.5deg)}
.parents-shot figcaption{margin-top:22px;font-size:14px;line-height:1.8;text-align:center}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:start}
.faq-head{position:sticky;top:120px;margin-bottom:0}
.faq-head .h2{font-size:clamp(34px,4.2vw,60px)}
.faq-chara{width:clamp(130px,14vw,200px);margin-top:10px;animation:bob 5s ease-in-out infinite}
.faq-list{display:grid;gap:14px;background:none;border:0;box-shadow:none}
.faq-list details{border-radius:22px;border-width:2px;box-shadow:4px 5px 0 var(--ink);overflow:hidden}
.faq-list summary{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 20px;cursor:pointer;list-style:none;font:700 clamp(16px,1.3vw,18px)/1.55 var(--f-label);color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .q{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--purple);color:#fff;border:2px solid var(--ink);font:900 18px/1 var(--f-display)}
.faq-list .qt{flex:1;min-width:0}
.pm{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:var(--yellow);transition:transform .3s var(--pop)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;margin:-1.25px 0 0 -6px;border-radius:2px;background:var(--ink)}
.pm::after{transform:rotate(90deg);transition:transform .3s}
details[open] .pm{transform:rotate(180deg)}
details[open] .pm::after{transform:rotate(0)}
.faq-list summary:hover .pm{transform:scale(1.12)}
.ans{padding:0 22px 22px 72px}
.ans p{font-size:15px;line-height:1.95}
.ans p+p{margin-top:10px}

/* ---------- ダウンロード ---------- */
.cta{position:relative;isolation:isolate;margin:clamp(18px,2.4vw,34px) clamp(6px,1.3vw,20px) 0;padding:clamp(110px,13vw,190px) var(--g);overflow:clip;border:2.5px solid var(--ink);border-radius:clamp(26px,3vw,44px)}
.cta-stripes{position:absolute;inset:-40% -20%;z-index:-1;display:flex;transform:rotate(-12deg)}
.cta-stripes i{flex:1;border-right:2.5px solid var(--ink)}
.cta-stripes i:nth-child(1){background:#FF5A47}.cta-stripes i:nth-child(2){background:#FF9F1C}.cta-stripes i:nth-child(3){background:#FFCB2F}.cta-stripes i:nth-child(4){background:#2FBF71}.cta-stripes i:nth-child(5){background:#3BA7FF}.cta-stripes i:nth-child(6){background:#8E6BFF}.cta-stripes i:nth-child(7){background:#FF6FA8}
.cta-card{position:relative;z-index:2;max-width:780px;margin-inline:auto;padding:clamp(70px,7vw,96px) clamp(22px,5vw,64px) clamp(34px,4vw,54px);text-align:center;border-width:3px;border-radius:40px;box-shadow:10px 12px 0 var(--ink)}
.cta-icon{position:absolute;left:50%;top:0;width:clamp(104px,11vw,148px);border-radius:24%;border:3px solid var(--ink);box-shadow:5px 6px 0 var(--ink);transform:translate(-50%,-55%) rotate(-6deg);animation:iconbob 4s ease-in-out infinite}
@keyframes iconbob{50%{transform:translate(-50%,-62%) rotate(4deg)}}
.cta .h2{font-size:clamp(30px,4.6vw,64px);margin:0 0 20px}
.cta-card p{font-size:clamp(15px,1.2vw,17px);line-height:2;max-width:34em;margin:0 auto 30px}
.cta-st{width:clamp(70px,9vw,130px);z-index:3}
.cta-st img{width:100%}
.c1{left:6%;top:18%}.c2{right:7%;top:9%;width:clamp(90px,12vw,170px)}.c3{left:10%;bottom:10%}.c4{right:20%;bottom:6%}
.cta-chara{right:3%;bottom:-2%;width:clamp(120px,16vw,240px);z-index:3}
.cta-chara img{width:100%}

/* ---------- フッター ---------- */
.ft{padding:44px var(--g) 52px}
.ft-inner{max-width:1320px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px}
.ft .brand{font-size:17px}
.ft .brand img{width:40px;height:40px;border-radius:11px}
.ft-nav{display:flex;flex-wrap:wrap;gap:6px 24px;font:700 14.5px/1 var(--f-label);color:var(--ink)}
.ft-nav a{display:inline-flex;align-items:center;gap:4px;min-height:44px}
.ft-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.ft small{width:100%;font-size:12.5px;letter-spacing:.06em;color:var(--muted)}

/* ---------- レスポンシブ ---------- */
@media (max-width:1180px){
  .nav a{padding:0 9px;font-size:14px}
  .nav .dot{display:none}
}
@media (max-width:1100px){
  .world-list{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tools{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:18px}
  .toolbox{grid-template-columns:1fr}
  .stamp-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media (max-width:980px){
  .chap[data-num]::after{display:none}
  .draw-note{position:relative;right:auto;top:auto;margin:26px 0 0 auto;width:max-content;max-width:100%}
  .draw-note svg{display:none}
  .st-cake{right:-4%;top:6%;bottom:auto}
  .c1{left:3%;top:2%}.c2{right:3%;top:1.5%;width:clamp(80px,12vw,120px)}.c3{left:3%;bottom:2%}.c4{display:none}
  .menu-btn{display:inline-flex}
  .hd-bar{gap:8px}
  .hd-cta{margin-left:auto}
  .nav{position:absolute;left:0;right:0;top:calc(100% + 12px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:12px;background:#FFFDF7;border:2.5px solid var(--ink);border-radius:26px;box-shadow:0 5px 0 var(--ink);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s,transform .3s var(--soft),visibility 0s .3s;margin:0}
  .nav a{min-height:52px;padding:0 16px;font-size:15.5px;border-radius:16px;background:#fff;border:2px solid #EDE3D3}
  .nav .dot{display:block}
  .hd.open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--soft)}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{display:contents}
  .hero-copy>*{position:relative;z-index:4}
  .hero-tag{order:1;justify-self:start}
  .h1{order:2;font-size:clamp(40px,12.2vw,96px)}
  .hero-stage{order:3;margin-block:clamp(10px,3vw,30px) clamp(30px,5vw,50px)}
  .hero-lead{order:4}
  .hero-actions{order:5}
  .hanko{order:6}
  .hero-note{order:7}
  .hero-stage{width:min(100%,640px);margin-inline:auto}
  .bento .bc{grid-column:span 12}
  .bc-shape,.bc-color{grid-column:span 6!important}
  .bc-stamp{grid-template-columns:1fr}
  .bc-stamp .bc-chara{position:absolute;right:16px;top:14px;width:110px;margin:0}
  .bc-stamp .bc-head,.bc-stamp-text>p{padding-right:110px}
  .pg{grid-template-columns:1fr}
  .pg-copy{max-width:640px}
  .color-top{grid-template-columns:1fr}
  .rocket-demo{max-width:400px}
  .steps{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
  .steps .step:nth-child(3){grid-column:1/-1;width:min(100%,520px);margin-inline:auto}
  .friend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:1fr 1fr}
  .f-main{grid-column:1/-1;grid-row:auto}
  .memo-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .parents-grid{grid-template-columns:1fr}
  .parents-shot{position:relative;top:auto;width:min(100%,560px);margin-inline:auto}
  .faq-grid{grid-template-columns:1fr}
  .faq-head{position:relative;top:auto;display:grid;grid-template-columns:1fr auto;align-items:end}
  .faq-head .chap-label,.faq-head .h2{grid-column:1}
  .faq-chara{grid-column:2;grid-row:1/3;width:120px}
  .world-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .brand span{font-size:17px}
  .hd-cta span{display:none}
  .hd-cta{padding:0 13px}
  .bc-shape,.bc-color{grid-column:span 12!important}
  .motion-grid{grid-template-columns:1fr}
  .play-notes{grid-template-columns:1fr}
  .memo-list{grid-template-columns:1fr 1fr}
  .tools{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .hd{padding:8px 8px 0}
  .hd-bar{padding:5px 5px 5px 6px}
  .brand{gap:8px}
  .brand img{width:38px;height:38px}
  .brand span{font-size:15.5px}
  .menu-txt{display:none}
  .menu-btn{padding:0 13px}
  .hero{padding-top:96px}
  .hero-tag{font-size:12.5px;padding:6px 14px 6px 8px}
  .h1{margin:20px 0 22px}
  .hero-actions .store{width:100%;justify-content:center}
  .hero-actions .btn-ghost{width:100%;justify-content:center}
  .hanko li{width:66px;height:66px;font-size:18px}
  .hero-stage{aspect-ratio:1/1.02}
  .dev-ipad{left:2%;top:16%;width:92%}
  .dev-iphone{left:-2%;top:52%;width:26%}
  .hero-chara{right:-4%;bottom:-2%;width:40%}
  .st-cloud{left:36%;top:4%}
  .ticker{padding:12px 0}
  .sheet{margin-inline:4px}
  .chap-num{width:48px;height:48px;font-size:26px}
  .chap-label{font-size:17px}
  .bc{border-radius:24px}
  .bc-tool{width:64px}
  .bc-magic .bc-chara{width:96px}
  .stamp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bc-stamp .bc-chara{width:84px;right:10px}
  .bc-stamp .bc-head,.bc-stamp-text>p{padding-right:76px}
  .draw-st{width:64px}
  .st-balloon{left:-4%;top:46%}.st-cake{right:-3%;top:6%;bottom:auto}
  .pg-box{transform:none;border-radius:26px}
  .pg-colors label{width:34px;height:34px}
  .pg-btns{width:100%}
  .pg-btn{flex:1;justify-content:center;padding:0 14px}
  .world-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-chara{left:-6%;width:40%;bottom:-10%}
  .rocket-demo{width:88%;margin-left:auto;margin-right:2%}
  .steps{grid-template-columns:1fr;gap:44px}
  .steps .step:nth-child(1) .dev{width:min(62%,230px)}
  .friend-grid{grid-template-columns:1fr}
  .friend{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:16px;text-align:left;align-items:start;padding:58px 18px 20px}
  .friend-art{grid-row:1/4;width:110px;margin:6px 0 0}
  .friend h3{margin-top:0;font-size:28px}
  .role{margin:6px 0 8px;justify-self:start;font-size:12px;padding:4px 11px;letter-spacing:.02em}
  .friend p{grid-column:1/-1;margin-top:12px}
  .bubble{right:12px;top:-22px;font-size:14px}
  .world b{font-size:14.5px;letter-spacing:0}
  .world span{font-size:12.5px;letter-spacing:0}
  .gallery{grid-template-columns:1fr;gap:30px}
  .f-sub1,.f-sub2{width:88%}
  .f-sub2{margin-left:auto}
  .memo-list{grid-template-columns:1fr;gap:20px}
  .trust-grid{grid-template-columns:1fr}
  .settings ul{grid-template-columns:1fr}
  .backup{padding:20px 18px 20px 64px}
  .backup::before{left:16px}
  .ans{padding:0 18px 20px 20px}
  .faq-list summary{padding:12px 14px;gap:12px}
  .cta{padding:120px 14px 150px}
  .cta-card{padding-inline:20px}
  .cta-chara{width:110px;right:2%}
  .c1{left:3%;top:4%}.c2{right:3%;top:3%}.c3{left:4%;bottom:5%}.c4{display:none}
}
@media (max-width:370px){
  .brand span{display:none}
  .world b{font-size:13px}
  .hanko{gap:8px}
}

/* ---------- プライバシーポリシー（privacy/） ---------- */
.pv-back-top{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px 0 12px;border-radius:999px;background:var(--yellow);border:2.5px solid var(--ink);font:700 15px/1 var(--f-label);color:var(--ink);white-space:nowrap;transition:transform .2s var(--pop)}
.pv-back-top svg,.pv-back .btn-ghost svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.pv-back-top:hover{transform:translateX(-3px)}
.pv-hero{position:relative;width:min(100% - var(--g)*2,var(--max));margin:0 auto;padding:clamp(120px,13vw,170px) 0 clamp(36px,4.6vw,64px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);align-items:end}
.pv-h1{font:900 clamp(38px,6.4vw,92px)/1.12 var(--f-display);letter-spacing:-.01em;font-feature-settings:"palt";margin:22px 0 22px}
.pv-lead{font-size:clamp(15.5px,1.25vw,18px);line-height:2.05;max-width:40em}
.pv-date{display:inline-block;margin-top:16px;padding:6px 16px;border-radius:999px;background:#fff;border:2px solid var(--ink);font:700 14px/1.5 var(--f-label);color:var(--ink)}
.pv-hero-art{position:relative;width:clamp(150px,19vw,260px);aspect-ratio:1;margin-right:clamp(10px,3vw,40px)}
.pv-art-main{position:absolute;left:4%;top:6%;width:92%;animation:bob 5s ease-in-out infinite}
.pv-st{position:absolute;width:30%;height:auto}
.pv-st.s1{left:-16%;top:6%;transform:rotate(-12deg)}
.pv-st.s2{right:-8%;top:-14%;width:26%;transform:rotate(10deg)}
.pv-st.s3{right:-22%;bottom:4%;width:36%}
.pv-sheet{margin-top:0;padding-top:clamp(64px,7vw,110px)}
.pv-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.pv-toc{position:sticky;top:110px}
.pv-toc-box{background:#fff;border:2.5px solid var(--ink);border-radius:24px;box-shadow:4px 5px 0 var(--ink);overflow:hidden}
.pv-toc-box summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px 6px;font:900 17px/1 var(--f-display);color:var(--ink);letter-spacing:.12em;list-style:none;cursor:default}
.pv-toc-box summary::-webkit-details-marker{display:none}
.pv-toc-box summary .pm{display:none}
.pv-toc-box ol{counter-reset:toc;padding:6px 10px 14px}
.pv-toc-box li{counter-increment:toc}
.pv-toc-box li:first-child{counter-increment:none}
.pv-toc-box a{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:6px;min-height:40px;padding:5px 10px;border-radius:12px;font:700 14.5px/1.5 var(--f-label);color:var(--ink-2);transition:background .2s,color .2s}
.pv-toc-box a::before{content:counter(toc);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#F3EBDD;font:900 12.5px/1 var(--f-display);color:var(--ink)}
.pv-toc-box li:first-child a::before{content:"★";background:var(--yellow);font-size:12px}
.pv-toc-box a:hover{background:color-mix(in srgb,var(--yellow) 35%,transparent);color:var(--ink)}
.pv-body{max-width:780px;min-width:0}
.pv-summary{position:relative;padding:36px clamp(22px,3vw,40px) 30px;margin-bottom:clamp(44px,5vw,70px);background:#FFF27A;border:2.5px solid var(--ink);border-radius:6px 6px 30px 6px;box-shadow:6px 7px 0 var(--ink);transform:rotate(-.6deg)}
.pv-summary::before{content:"";position:absolute;left:50%;top:-13px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--red);border:2.5px solid var(--ink);box-shadow:inset -4px -4px 0 rgba(0,0,0,.18)}
.pv-summary h2{font:900 clamp(22px,2vw,28px)/1.3 var(--f-display);margin-bottom:16px;letter-spacing:.08em}
.pv-summary ul{display:grid;gap:12px}
.pv-summary li{position:relative;padding-left:36px;font:700 clamp(15.5px,1.2vw,17.5px)/1.8 var(--f-label);color:var(--ink)}
.pv-summary li::before{content:"";position:absolute;left:0;top:.2em;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);background:#0F9488 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.pv-sec{padding:clamp(30px,3.6vw,46px) 0;border-top:2.5px dashed #E4D9C9}
.pv-sec:first-of-type{border-top:0;padding-top:0}
.pv-sec h2{display:flex;align-items:center;gap:14px;font:900 clamp(22px,2.2vw,30px)/1.35 var(--f-display);margin-bottom:18px}
.pv-no{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:52% 48% 55% 45%/48% 55% 45% 52%;background:var(--nc,#0F9488);color:#fff;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:900 22px/1 var(--f-display);transform:rotate(-6deg)}
.pv-sec:nth-of-type(8n+1){--nc:#D8382A}.pv-sec:nth-of-type(8n+2){--nc:#1F6FC0}.pv-sec:nth-of-type(8n+3){--nc:#E8457F}.pv-sec:nth-of-type(8n+4){--nc:#1E9A57}.pv-sec:nth-of-type(8n+5){--nc:#7B57F5}.pv-sec:nth-of-type(8n+6){--nc:#0F9488}.pv-sec:nth-of-type(8n+7){--nc:#D8382A}.pv-sec:nth-of-type(8n+8){--nc:#1F6FC0}
.pv-sec p{font-size:16px;line-height:2.05}
.pv-sec p+p{margin-top:14px}
.pv-sec a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:#0F9488;border-radius:4px;transition:background .2s}
.pv-sec a:hover{background:color-mix(in srgb,var(--yellow) 45%,transparent)}
.pv-back{margin-top:clamp(36px,5vw,60px)}
.pv h1,.pv h2,.pv li{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:980px){
  .pv-grid{grid-template-columns:1fr;gap:34px}
  .pv-toc{position:static}
  .pv-toc-box summary{cursor:pointer;padding:16px 18px}
  .pv-toc-box summary .pm{display:block}
  .pv-toc-box ol{columns:2;column-gap:6px;padding-top:0}
  .pv-toc-box li{break-inside:avoid}
  .pv-body{max-width:none}
}
@media (max-width:620px){
  .pv-hero{grid-template-columns:1fr;padding-top:96px}
  .pv-hero-art{position:absolute;right:2px;top:88px;width:92px;margin:0}
  .pv-st.s1,.pv-st.s3{display:none}
  .pv-toc-box ol{columns:1}
  .pv-sec h2{gap:12px}
  .pv-no{width:40px;height:40px;font-size:19px}
  .pv-summary{transform:none}
}
@media (max-width:430px){
  .pv-back-top{padding:0 12px}
  .pv-back-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important}
  .bob,.ticker-track,.ui-roll,.faq-chara,.cta-icon,.sparkle,.pv-art-main{animation:none!important}
  .js .rocket-demo .fl{transform:scale(1)}
  .rd-bucket,.rd-count,.rd-flame,.rd-smoke{display:none}
}