/* ぽっけフォン 紹介ページ（2026-10-08 リデザイン）
   空・ポケット・絵本。キャラクターの茶色の線と同じ線で、スマホやポケットも「おもちゃ」として描く。
   動きはCSSのみ（読み込み時と画面に入ったとき）。スクロールを制御するJSは使わない。 */

@font-face{font-family:"Pokke Display";src:url("assets/fonts/pokke-display.woff2?v=20261008") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Pokke Display";src:url("assets/fonts/pokke-bold.woff2?v=20261008") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Pokke Hand";src:url("assets/fonts/pokke-hand.woff2?v=20261008") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --ink:#1F3D61;--ink-2:#46648A;--ink-3:#52698A;
  --line:#3D2A21;
  --sky-0:#F2FAFF;--sky-1:#E1F2FD;--sky-2:#CBE8FA;--sky-3:#A7D5F3;
  --paper:#FFFAF0;--paper-2:#FFF1D8;
  --coral:#FF8466;--coral-2:#FFE2D8;
  --pink:#EF5A8A;--pink-2:#FDE0EA;
  --yellow:#FFC22E;--yellow-2:#FFF0BE;--yellow-bg:#FFF6DD;
  --green:#3FAE5F;--green-2:#DAF1DE;--green-bg:#EAF6E6;
  --lav:#9883DD;--lav-2:#EAE4FA;--lav-bg:#F5F2FD;
  --blue:#3388D8;--blue-2:#D6EAFC;
  --display:"Pokke Display","Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;
  --body:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --hand:"Pokke Hand","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --wrap:1280px;--gut:clamp(20px,5vw,72px);
  --r:28px;
  --shadow:0 18px 40px -22px rgba(31,61,97,.35),0 4px 12px -6px rgba(31,61,97,.12);
  --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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/2 var(--body);letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:clip;
  line-break:strict;text-autospace:normal;text-spacing-trim:trim-start}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p,figure,ul,ol,h1,h2,h3{margin:0}
ul{padding:0;list-style:none}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:8px}
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
main{overflow-x:clip}
.nw{white-space:nowrap}
.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:10px 18px;background:var(--ink);color:#fff;border-radius:999px;font-weight:700;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* 日本語の組版：見出し・短い文は文節（<wbr>）でだけ折り返す */
h1,h2,h3,figcaption,summary,.bubble,.anno,.chap-label,.f-q,.f-desc,.play p,.tr p,.settings li,.chips li,.hero-tag,.dl-title{word-break:keep-all;overflow-wrap:anywhere}
/* text-wrap:balance は WebKit で <wbr> と keep-all の組み合わせ時に文字を二重に描くため使わない（2026-10 確認） */
p{word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,.chap-label,.brand,.hd-nav,.store,.btn-ghost,.chips,.games,.role,.f-q,figcaption strong,.st,summary,.icon-grid li,.ticker{font-feature-settings:"palt";}

/* ================= ヘッダー ================= */
.hd{position:fixed;inset:0 0 auto;z-index:50;padding:14px var(--gut) 0;pointer-events:none}
.hd-bar{pointer-events:auto;max-width:calc(var(--wrap) + 40px);margin:0 auto;display:flex;align-items:center;gap:clamp(12px,2vw,28px);height:64px;padding:0 10px 0 12px;border-radius:999px;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 10px 30px -12px rgba(31,61,97,.22);transition:background .3s,box-shadow .3s}
.hd.is-scrolled .hd-bar{background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 12px 34px -12px rgba(31,61,97,.3)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;font-size:1.25rem;letter-spacing:.02em;white-space:nowrap;line-height:1}
.brand img{width:40px;height:40px;border-radius:12px;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(31,61,97,.18)}
.hd-nav{display:flex;align-items:center;gap:clamp(4px,1vw,14px);margin-left:auto;font-family:var(--display);font-weight:700;font-size:.88rem;letter-spacing:.02em}
.hd-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:999px;transition:background .2s}
.hd-nav a:hover{background:rgba(31,61,97,.06)}
.hd-cta{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px 0 16px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:.88rem;letter-spacing:.02em;white-space:nowrap;transition:transform .2s,background .2s}
.hd-cta svg{width:17px;height:17px}
.hd-cta:hover{background:#15304F;transform:translateY(-1px)}

/* ================= 共通パーツ ================= */
.phone{position:relative;padding:3.4%;border-radius:15.5%/7.1%;background:#FFF7E5;box-shadow:0 0 0 2.5px var(--line),0 34px 46px -26px rgba(31,61,97,.45),0 14px 20px -12px rgba(31,61,97,.18)}
.phone::after{content:"";position:absolute;inset:3.4%;border-radius:12.6%/5.8%;box-shadow:0 0 0 1.5px rgba(61,42,33,.18);pointer-events:none}
.phone>img{width:100%;border-radius:12.6%/5.8%;background:#EAF5FC}
.phone.wide{padding:1.6%;border-radius:6.5%/15%}
.phone.wide::after,.phone.wide>img{border-radius:5.4%/12.4%}
.phone.wide::after{inset:1.6%}

.shot{position:relative;margin:0}
.shot figcaption{margin-top:22px;text-align:center;font-size:.86rem;line-height:1.75;color:var(--ink-2);letter-spacing:.03em}
.shot figcaption strong{display:block;margin-bottom:2px;font-family:var(--display);font-weight:900;font-size:1.04rem;color:var(--ink);letter-spacing:.04em}

.bubble{position:absolute;z-index:4;padding:.55em 1.1em .6em;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--display);font-weight:900;line-height:1.35;letter-spacing:.04em;box-shadow:0 0 0 2.5px var(--line),0 10px 22px -10px rgba(31,61,97,.4);white-space:nowrap}
.bubble::after{content:"";position:absolute;left:28px;bottom:-13px;width:20px;height:16px;background:#fff;clip-path:polygon(0 0,100% 0,18% 100%);filter:drop-shadow(-2.5px 0 0 var(--line)) drop-shadow(2.5px 0 0 var(--line)) drop-shadow(0 2.5px 0 var(--line))}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips li{padding:7px 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(31,61,97,.12);font-family:var(--display);font-weight:700;font-size:.84rem;line-height:1.5;color:var(--ink-2);letter-spacing:.03em}

.hand{font-family:var(--hand);font-weight:600;letter-spacing:.02em}

/* マーカー（見出しの強調）：クレヨンで引いたような太い下線 */
.mk{white-space:nowrap;background-repeat:no-repeat;background-size:100% .34em;background-position:0 88%;padding:0 .04em}
.mk-pink{background-image:linear-gradient(transparent,transparent),linear-gradient(var(--pink-2),var(--pink-2))}
.mk-yellow{background-image:linear-gradient(var(--yellow),var(--yellow));background-size:100% .3em}
.mk-green{background-image:linear-gradient(#BFE8C8,#BFE8C8)}
.mk-lav{background-image:linear-gradient(#D9CFF7,#D9CFF7)}
.mk-pink{background-image:linear-gradient(#FBC5D7,#FBC5D7)}

/* セクションの境目：上辺を雲のように丸く */
.scallop,.apps,.chap,.dl{position:relative}
/* 雲形のふち：セクション本体と同じ「紙の質感＋色」を、丸の形に切り抜いて上に重ねる（無地で描くと質感の分だけ色がずれる） */
.apps::before,.chap::before,.dl::before,.pp-body::before{content:"";position:absolute;left:0;right:0;top:-29px;height:30px;background:var(--grain),var(--bg);-webkit-mask:radial-gradient(circle at 36px 36px,#000 35px,transparent 36px) -6px 0/72px 30px repeat-x;mask:radial-gradient(circle at 36px 36px,#000 35px,transparent 36px) -6px 0/72px 30px repeat-x;pointer-events:none}

/* ================= ヒーロー ================= */
.hero{position:relative;overflow:clip;padding:clamp(112px,11vw,150px) 0 clamp(96px,9vw,140px);background:var(--grain),linear-gradient(180deg,#CDE9FB 0%,#DDF1FD 42%,#EDF8FF 100%)}
.hero-sky{position:absolute;inset:0;pointer-events:none}
.hero-sky .cl{position:absolute;color:#fff;height:auto}
.cl1{width:clamp(140px,16vw,250px);left:-3%;top:16%;opacity:.95}
.cl2{width:clamp(90px,10vw,150px);left:38%;top:12%;opacity:.8}
.cl3{width:clamp(160px,19vw,290px);right:-4%;bottom:10%;opacity:.95}
.cl4{width:clamp(80px,8vw,120px);left:8%;bottom:8%;opacity:.7}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);align-items:center;gap:clamp(16px,3vw,44px)}
.hero-copy{position:relative;z-index:2;container-type:inline-size}
.hero-tag{display:inline-flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border-radius:999px;background:#fff;box-shadow:0 6px 16px -10px rgba(31,61,97,.35);font-family:var(--display);font-weight:700;font-size:.88rem;line-height:1.4;letter-spacing:.04em;color:var(--ink)}
.tag-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-2)}
.tag-os{padding:3px 10px;border-radius:999px;background:var(--sky-1);font-size:.78rem;color:#2370BD}
.hero-title{margin-top:26px;font-family:var(--display);font-weight:900;line-height:1.1;letter-spacing:.01em}
.ht-1{display:block;font-size:clamp(2.1rem,1rem + 3.6vw,3.9rem);letter-spacing:.02em}
.ht-2{position:relative;display:block;width:max-content;margin-top:.06em;margin-left:-.04em;font-size:clamp(4.4rem,1rem + 10vw,10rem);font-size:clamp(3.3rem,20cqi,10.4rem);line-height:1.04;letter-spacing:-.02em;color:var(--pink)}
.ht-2 .ch{display:inline-block;transform-origin:50% 90%}
.ht-2 .c1{transform:rotate(-5deg)}
.ht-2 .c2{transform:translateY(-.05em) rotate(3deg);color:#FF7A5C}
.ht-2 .c3{transform:rotate(-2deg)}
.ht-2 .c4{transform:translateY(-.06em) rotate(5deg);color:#FF7A5C}
.ht-2 .c5{margin-left:-.12em}
.ht-2 .c5{position:relative}
.ht-waves{position:absolute;width:.3em;height:.42em;left:.36em;top:.06em;color:var(--yellow);transform:rotate(-14deg)}
.hero-lead{margin-top:28px;max-width:31em;font-size:clamp(1rem,.94rem + .25vw,1.14rem);line-height:2.05;color:var(--ink-2)}
.hero-lead em{white-space:nowrap;font-style:normal;font-weight:700;color:var(--ink);background:linear-gradient(transparent 62%,var(--yellow-2) 62%)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:32px}
.store{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:8px 26px 8px 20px;border-radius:20px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.2;letter-spacing:.02em;box-shadow:0 6px 0 #0F2744}
.store svg{width:28px;height:28px;flex-shrink:0}
.store small{display:block;font-size:.7rem;font-weight:700;opacity:.75;letter-spacing:.04em}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 24px;border-radius:999px;background:#fff;font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:.04em;box-shadow:inset 0 0 0 2px rgba(31,61,97,.14);transition:transform .2s,box-shadow .2s}
.btn-ghost svg{width:18px;height:18px}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--blue)}
.stamps{display:flex;gap:14px;margin-top:30px}
.st{display:grid;place-content:center;width:78px;height:78px;border-radius:50%;text-align:center;font-family:var(--display);font-weight:900;font-size:1.06rem;line-height:1.1;color:var(--c);background:#fff;box-shadow:inset 0 0 0 2.5px var(--c),inset 0 0 0 6px #fff,inset 0 0 0 7.5px var(--c)}
.st span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;margin-bottom:3px}
.st1{--c:#D23E70;transform:rotate(-8deg)}
.st2{--c:#B85A16;transform:rotate(5deg) translateY(4px)}
.st3{--c:#23874A;transform:rotate(-3deg)}
.hero-note{margin-top:20px;font-size:.82rem;line-height:1.8;color:var(--ink-3)}

.hero-art{position:relative;z-index:1;aspect-ratio:1/1.08;width:100%;max-width:600px;justify-self:end}
.hero-sun{position:absolute;left:14%;top:4%;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#FFF6CF 0 56%,#FFEFB3 57% 100%);box-shadow:0 0 0 18px rgba(255,239,179,.35)}
.pocket-phone{position:absolute;right:4%;bottom:0;width:64%;aspect-ratio:400/560}
/* スマホはポケットの内側（ポケット底より上）で切り、ポケットからはみ出さない */
.pocket-clip{position:absolute;left:-20%;right:-20%;top:-40%;bottom:7%;overflow:hidden}
.hero-phone{position:absolute;left:25%;top:calc(40% / 1.33);width:50%;transform:rotate(5deg);transform-origin:50% 100%}
.pocket{position:absolute;left:0;bottom:0;width:100%;height:auto;overflow:visible}
.pk-body{fill:#FBD3DD}
.pk-hem{fill:#F7BFCD}
.pk-stitch{fill:none;stroke:#EC93AB;stroke-width:3;stroke-dasharray:10 8;stroke-linecap:round}
.pk-line{fill:none;stroke:var(--line);stroke-width:4.5;stroke-linejoin:round}
.hero-pokke{position:absolute;z-index:3;left:-6%;bottom:-2%;width:50%}
.hero-art::after{content:"";position:absolute;z-index:2;left:2%;bottom:-3%;width:36%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(31,61,97,.22),rgba(31,61,97,0))}
.hero-bubble{left:-4%;top:37%;font-size:clamp(.9rem,.6rem + .8vw,1.15rem);transform:rotate(-4deg)}
.hero-bubble::after{left:34%}
.floaters .fl{position:absolute;z-index:2;width:clamp(62px,7vw,100px)}
.fl1{left:16%;top:3%;transform:rotate(-10deg)}
.fl2{right:-3%;top:6%;transform:rotate(9deg)}
.fl3{right:-7%;top:44%;transform:rotate(-6deg)}
.fl4{left:2%;top:17%;transform:rotate(6deg);width:clamp(52px,5.4vw,76px)!important}
.sp{position:absolute;color:var(--yellow);width:28px;height:28px}
.sp1{left:2%;top:18%;width:34px;height:34px}
.sp2{right:16%;top:-2%;color:var(--pink);width:22px;height:22px}
.sp3{right:-2%;bottom:30%;color:#fff;width:30px;height:30px}

/* ================= 14のあそび ================= */
.apps{--bg:var(--paper);background:var(--paper) var(--grain);padding:clamp(56px,7vw,96px) 0 clamp(80px,9vw,130px)}
.apps-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px}
.apps-title{font-family:var(--display);font-weight:900;line-height:1}
.at-s{display:block;font-size:clamp(1.6rem,1rem + 2vw,2.6rem);letter-spacing:.04em;margin-bottom:.1em}
.at-l{display:flex;align-items:baseline;gap:.06em}
.at-num{font-size:clamp(7rem,3rem + 13vw,13.5rem);line-height:.86;letter-spacing:-.04em;color:var(--coral);text-shadow:0 .045em 0 #F2C3B5}
.at-unit{font-size:clamp(2.2rem,1rem + 4vw,4.4rem);letter-spacing:.02em}
.apps-lead{max-width:24em;padding-bottom:.6em;font-size:clamp(1rem,.95rem + .25vw,1.12rem);color:var(--ink-2)}
.icon-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(18px,2.4vw,34px) clamp(10px,1.6vw,24px);margin-top:clamp(40px,5vw,64px)}
.icon-grid li{display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(.78rem,.7rem + .25vw,.92rem);line-height:1.3;color:var(--ink-2);letter-spacing:.02em}
.ic{display:block;width:100%;max-width:116px;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.ic img{width:100%}
.icon-grid li:hover .ic{transform:translateY(-6px) rotate(-6deg)}
.icon-grid li:nth-child(even):hover .ic{transform:translateY(-6px) rotate(6deg)}
.apps-note{position:relative;max-width:46em;margin:clamp(40px,5vw,60px) auto 0;padding:22px 28px;border-radius:22px;background:#fff;font-size:.92rem;line-height:1.95;color:var(--ink-2);box-shadow:var(--shadow)}
.apps-note .hand{position:absolute;left:24px;top:-18px;padding:2px 16px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:1.05rem;letter-spacing:0;font-feature-settings:"palt";transform:rotate(-3deg)}

/* 流れる帯（装飾） */
.ticker{position:relative;z-index:3;overflow:hidden;width:104%;margin:-34px -2% -26px;padding:16px 0;background:#E8603F;color:#fff;transform:rotate(-2deg);box-shadow:0 0 0 2.5px var(--line)}
.ticker-track{display:flex;align-items:center;gap:26px;width:max-content;animation:ticker 48s linear infinite;font-family:var(--display);font-weight:900;font-size:clamp(1.3rem,1rem + 1vw,1.9rem);line-height:1;letter-spacing:.06em;white-space:nowrap}
.ticker svg{width:22px;height:22px;color:var(--yellow);flex-shrink:0}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ================= 章（共通） ================= */
.chap{padding:clamp(96px,10vw,150px) 0 clamp(96px,10vw,150px)}
.chap-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px}
.chap-head.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.chap-text{max-width:720px}
.chap-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:900;font-size:1rem;line-height:1.3;letter-spacing:.08em;color:var(--accent-ink,var(--accent))}
.chap-label .no{display:grid;place-items:center;width:46px;height:46px;border-radius:40% 60% 55% 45%/50% 45% 55% 50%;background:var(--accent);color:#fff;font-size:1.4rem;letter-spacing:0;box-shadow:0 0 0 2.5px var(--line);transform:rotate(-8deg)}
.chap-label .no svg{width:24px;height:24px}
.chap-title{margin-top:22px;font-family:var(--display);font-weight:900;font-size:clamp(2.1rem,1.1rem + 3.5vw,4.1rem);line-height:1.32;letter-spacing:.02em}
.chap .lead{margin-top:24px;max-width:36em;font-size:clamp(1rem,.95rem + .22vw,1.1rem);line-height:2.05;color:var(--ink-2)}
.chap-head.center .lead{margin-inline:auto}
.host{width:clamp(150px,17vw,250px);margin-bottom:-8px}
.chap-sub{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:900;font-size:.95rem;letter-spacing:.08em;color:var(--accent-ink,var(--accent))}
.chap-sub svg{width:20px;height:20px}

/* ---------- 1 でんわ・メッセージ ---------- */
.ticker+.chap::before{display:none}
.chap-talk{--bg:var(--sky-1);--accent:var(--pink);--accent-ink:#BF3565;background:var(--grain),linear-gradient(180deg,var(--sky-1),#EAF6FE)}
.talk-show{display:grid;grid-template-columns:repeat(3,minmax(0,250px));justify-content:center;align-items:start;gap:clamp(24px,5vw,80px);margin-top:clamp(56px,6vw,84px)}
.shot-in,.shot-b{margin-top:clamp(40px,5vw,72px)}
.shot-in .phone{transform:rotate(-4deg)}
.shot-a .phone{transform:rotate(1.5deg)}
.shot-b .phone{transform:rotate(4deg)}
.anno{position:absolute;z-index:2;display:flex;flex-direction:column;font-family:var(--hand);font-weight:600;font-size:clamp(1rem,.75rem + .45vw,1.22rem);line-height:1.45;letter-spacing:0;font-feature-settings:"palt";color:var(--ink);white-space:nowrap}
.anno span{display:block;transform:rotate(-4deg);text-shadow:3px 0px 0 #fff,-3px 0px 0 #fff,0px 3px 0 #fff,0px -3px 0 #fff,2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,3px 1px 0 #fff,-3px 1px 0 #fff,3px -1px 0 #fff,-3px -1px 0 #fff,1px 3px 0 #fff,-1px 3px 0 #fff,1px -3px 0 #fff,-1px -3px 0 #fff,0 0 8px rgba(255,255,255,.9)}
.anno svg{width:92px;height:54px;flex-shrink:0;margin-top:-2px;color:var(--pink)}
.anno-i1{right:100%;top:26%;margin-right:-42px;align-items:flex-end}
.anno-i1 span{margin-right:58px}
.anno-b1{left:100%;top:27%;margin-left:-42px;align-items:flex-start}
.anno-b1 span{margin-left:62px}
.anno-b1 svg{color:var(--blue)}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(64px,7vw,96px)}
.card{position:relative;padding:28px 28px 30px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.card img{width:70px;height:70px;margin:-6px 0 0 -6px}
.card h3{margin-top:14px;font-family:var(--display);font-weight:900;font-size:1.22rem;line-height:1.45;letter-spacing:.03em}
.card p{margin-top:10px;font-size:.92rem;line-height:1.95;color:var(--ink-2)}
.safe{display:flex;align-items:center;gap:18px;max-width:880px;margin:28px auto 0;padding:20px 28px;border-radius:999px;background:var(--ink);color:#DCE8F5;font-size:.9rem;line-height:1.75}
.safe strong{display:block;color:#fff;font-family:var(--display);font-weight:900;font-size:1.05rem;letter-spacing:.04em}
.safe-ic{display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff}
.safe-ic svg{width:26px;height:26px}
.family{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,80px);margin-top:clamp(80px,9vw,130px);padding:clamp(36px,5vw,72px);border-radius:clamp(28px,4vw,48px);background:#fff var(--grain);box-shadow:var(--shadow)}
.family-title{margin-top:14px;font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,1.1rem + 2.2vw,3rem);line-height:1.38;letter-spacing:.02em}
.family-text>p:not(.chap-sub){margin-top:20px;color:var(--ink-2);font-size:.98rem}
.family .chips li{background:var(--pink-2);box-shadow:none;color:#B33A64}
.family-phones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);align-items:start}
.family-phones .shot:nth-child(2){margin-top:clamp(36px,5vw,64px)}

/* ---------- 2 つくる ---------- */
.chap-create{--bg:var(--paper);--accent:#E8703F;--accent-ink:#B9532A;background:var(--paper) var(--grain)}
.gallery{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(18px,3.4vw,64px);max-width:980px;margin:clamp(56px,6vw,84px) auto 0}
.gallery .shot{position:relative;z-index:1}
.gallery::before{content:"";position:absolute;left:-6%;right:-6%;top:12%;bottom:20%;border-radius:48px;background:var(--yellow-2);transform:rotate(-1.6deg)}
.g1 .phone{transform:rotate(-4deg)}
.g2{margin-top:clamp(28px,4vw,60px)}
.g2 .phone{transform:rotate(2deg)}
.g3 .phone{transform:rotate(5deg)}
.gsp1{left:31%;top:-4%;width:34px;height:34px;color:var(--coral)}
.gsp2{right:30%;bottom:16%;width:26px;height:26px;color:var(--lav)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(32px,6vw,96px);margin-top:clamp(80px,9vw,130px)}
.split-phones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);align-items:start;max-width:540px}
.split-phones .shot:nth-child(2){margin-top:clamp(36px,5vw,64px)}
.rows{display:grid;gap:14px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:22px 26px;border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.row img{width:64px;height:64px;margin:-4px 0 0 -4px}
.row h3{font-family:var(--display);font-weight:900;font-size:1.15rem;line-height:1.4;letter-spacing:.04em}
.row p{margin-top:6px;font-size:.92rem;line-height:1.95;color:var(--ink-2)}
.memo{position:relative;margin-top:22px;padding:22px 26px 22px 30px;border-radius:6px 24px 24px 24px;background:var(--yellow-2);font-size:.9rem;line-height:1.9;color:var(--ink-2);transform:rotate(-.6deg)}
.memo::before{content:"";position:absolute;left:24px;top:-10px;width:70px;height:20px;background:rgba(255,255,255,.7);transform:rotate(-4deg);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.memo strong{display:block;margin-bottom:4px;color:var(--ink);font-family:var(--display);font-weight:900;font-size:1.02rem;letter-spacing:.04em}

/* ---------- 3 あそぶ ---------- */
.chap-play{--bg:var(--yellow-bg);--accent:#2E9A52;--accent-ink:#237A40;background:var(--yellow-bg) var(--grain)}
.play-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(56px,6vw,84px)}
.play{display:flex;flex-direction:column;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.play-pic{position:relative;height:clamp(230px,24vw,330px);overflow:hidden;background:var(--pc);border-bottom:2.5px solid var(--line)}
.play-pic .phone{position:absolute;left:50%;top:26px;width:68%;transform:translateX(-50%) rotate(-3deg);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.play:hover .play-pic .phone{transform:translateX(-50%) translateY(-8px) rotate(0)}
.p-lav{--pc:var(--lav-2)}.p-blue{--pc:var(--blue-2)}.p-pink{--pc:var(--pink-2)}.p-yellow{--pc:var(--yellow-2)}
.play h3{display:flex;align-items:center;gap:10px;margin:22px 22px 0;font-family:var(--display);font-weight:900;font-size:1.15rem;line-height:1.4;letter-spacing:.03em}
.play h3 img{width:46px;height:46px;flex-shrink:0;margin:-4px -2px -4px -4px}
.play p{margin:10px 22px 26px;font-size:.88rem;line-height:1.9;color:var(--ink-2)}
.piano{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,56px);margin-top:clamp(18px,2.4vw,28px);padding:clamp(24px,3.4vw,48px) clamp(24px,3.4vw,48px) clamp(48px,5vw,72px);border-radius:var(--r);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.piano-pic .phone{transform:rotate(-1.5deg)}
.piano h3{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem);line-height:1.3;letter-spacing:.04em}
.piano h3 img{width:56px;height:56px}
.piano-text>p:not(.games-h){margin-top:14px;font-size:.95rem;color:var(--ink-2)}
.games-h{margin-top:22px;font-family:var(--display);font-weight:900;font-size:.95rem;letter-spacing:.06em;color:var(--accent-ink,var(--accent))}
.games{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.games li{padding:5px 13px;border-radius:999px;background:var(--yellow-bg);font-family:var(--display);font-weight:700;font-size:.8rem;line-height:1.5;color:var(--ink-2);letter-spacing:.02em}
.keys{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(8,1fr);height:16px}
.keys i:nth-child(1){background:#F06C8F}.keys i:nth-child(2){background:#FF9A5C}.keys i:nth-child(3){background:#FFC93D}.keys i:nth-child(4){background:#6FCB7E}.keys i:nth-child(5){background:#4FC2D6}.keys i:nth-child(6){background:#5D9BEA}.keys i:nth-child(7){background:#A08BE6}.keys i:nth-child(8){background:#F06C8F}

/* ---------- 4 おともだち ---------- */
.chap-friends{--bg:var(--lav-bg);--accent:#7B66CC;--accent-ink:#6A54BF;background:var(--lav-bg) var(--grain)}
.friends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(64px,7vw,100px)}
.friend{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 22px 30px;border-radius:var(--r);background:#fff;text-align:center;box-shadow:var(--shadow)}
.f-pic{position:relative;width:100%;aspect-ratio:1/1;margin-top:-40px;display:grid;place-items:end center}
.f-pic::before{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:var(--fc);bottom:2%;left:10%}
.f-pic img{position:relative;width:auto;max-width:88%;max-height:100%;object-fit:contain;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.friend:hover .f-pic img{transform:translateY(-8px) rotate(-3deg)}
.f-pokke{--fc:var(--coral-2);--fk:#B9432A}.f-koneri{--fc:var(--green-2);--fk:#237A40}.f-mito{--fc:var(--lav-2);--fk:#6A54BF}.f-fuu{--fc:var(--blue-2);--fk:#2370BD}
.f-q{position:relative;margin-top:14px;padding:8px 16px;border-radius:16px;background:var(--fc);font-family:var(--display);font-weight:900;font-size:.98rem;line-height:1.45;color:var(--ink)}
.f-q::before{content:"";position:absolute;left:50%;top:-9px;width:18px;height:10px;margin-left:-9px;background:var(--fc);clip-path:polygon(50% 0,100% 100%,0 100%)}
.f-q q{quotes:"「" "」"}
.friend h3{margin-top:16px;font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,1.2rem + 1vw,2.1rem);line-height:1.2;letter-spacing:.06em}
.role{display:inline-block;margin-top:8px;padding:3px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--fk);color:var(--fk);font-family:var(--display);font-weight:700;font-size:.76rem;line-height:1.5;letter-spacing:.04em}
.f-desc{margin-top:14px;font-size:.88rem;line-height:1.9;color:var(--ink-2)}
.room{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(32px,6vw,96px);max-width:1000px;margin:clamp(80px,9vw,130px) auto 0}
.room-shot{width:min(100%,300px);justify-self:center}
.room-shot .phone{transform:rotate(-3deg)}
.room-title{margin-top:14px;font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,1.1rem + 2.2vw,3rem);line-height:1.38;letter-spacing:.02em}
.room-text>p:not(.chap-sub){margin-top:20px;color:var(--ink-2);font-size:.98rem}
.room .chips li{background:var(--lav-2);box-shadow:none;color:#6550B8}

/* ---------- 保護者の方へ ---------- */
.chap-parents{--bg:var(--green-bg);--accent:#2E9A52;--accent-ink:#237A40;background:var(--green-bg) var(--grain)}
.parents-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start;gap:clamp(32px,5vw,72px);margin-top:clamp(48px,6vw,72px)}
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tr{padding:26px 26px 28px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.tr-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--green-2)}
.tr-ic svg{width:32px;height:32px;fill:none;stroke:#2E9A52;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tr h3{margin-top:16px;font-family:var(--display);font-weight:900;font-size:1.12rem;line-height:1.45;letter-spacing:.03em}
.tr p{margin-top:8px;font-size:.88rem;line-height:1.9;color:var(--ink-2)}
.settings{margin-top:14px;padding:28px 30px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.settings h3{font-family:var(--display);font-weight:900;font-size:1.12rem;letter-spacing:.03em}
.settings ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;margin-top:16px}
.settings li{position:relative;padding:6px 0 6px 30px;border-bottom:1px dashed #CFE6D3;font-family:var(--display);font-weight:700;font-size:.88rem;line-height:1.6;color:var(--ink-2);letter-spacing:.02em}
.settings li::before{content:"";position:absolute;left:0;top:.55em;width:20px;height:20px;border-radius:50%;background:var(--green-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232E9A52' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}
.settings>p{margin-top:18px;padding:14px 18px;border-radius:16px;background:var(--green-bg);font-size:.84rem;line-height:1.9;color:var(--ink-2)}
.parents-phones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);align-items:start;position:sticky;top:110px}
.parents-phones .shot:nth-child(2){margin-top:clamp(36px,4vw,56px)}

/* ---------- よくある質問 ---------- */
.chap-faq{--bg:var(--sky-1);--accent:var(--blue);--accent-ink:#2370BD;background:var(--grain),linear-gradient(180deg,var(--sky-1),var(--sky-0))}
.faq-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq-head{position:sticky;top:120px}
.chap-label.is-faq .no{font-size:1.3rem}
.faq-pokke{width:clamp(120px,13vw,190px);margin-top:28px;transform:rotate(-6deg)}
.faq-list{display:grid;gap:12px}
details{border-radius:22px;background:#fff;box-shadow:var(--shadow);transition:box-shadow .2s}
details[open]{box-shadow:0 0 0 2.5px var(--line),var(--shadow)}
summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.55;letter-spacing:.03em}
summary::-webkit-details-marker{display:none}
summary .q{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--yellow-2);font-family:var(--display);font-weight:900;font-size:1.05rem;transform:rotate(-6deg);transition:background .2s}
summary:hover .q{background:var(--yellow)}
summary .plus{position:relative;width:32px;height:32px;border-radius:50%;background:var(--sky-1);transition:transform .3s,background .2s}
summary .plus::before,summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2.5px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] summary .plus{transform:rotate(45deg);background:var(--yellow-2)}
.answer{padding:0 24px 24px 76px;font-size:.94rem;line-height:2;color:var(--ink-2)}
.answer a{color:#2370BD;text-decoration:underline;text-underline-offset:4px}

/* ================= 公開準備中 ================= */
.dl{--bg:#D8EEFC;padding:clamp(96px,10vw,140px) 0 0;background:var(--grain),linear-gradient(180deg,#D8EEFC 0%,#C3E4FA 100%);overflow-x:clip;text-align:center}
.dl-hill{overflow:clip}
.dl-sky{position:absolute;inset:0;pointer-events:none}
.dl-sky .cl{position:absolute;color:#fff}
.dl-sky .cl1{left:4%;top:22%;width:clamp(120px,14vw,220px);opacity:.9}
.dl-sky .cl2{right:6%;top:12%;width:clamp(90px,10vw,160px);opacity:.8}
.dl-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.dl-icon{width:clamp(96px,10vw,128px);border-radius:28%;box-shadow:0 0 0 2.5px var(--line),0 20px 30px -14px rgba(31,61,97,.45);transform:rotate(-6deg)}
.dl-title{margin-top:30px;font-family:var(--display);font-weight:900;font-size:clamp(2rem,1rem + 3.4vw,4.2rem);line-height:1.25;letter-spacing:.02em}
.dl-text{max-width:34em;margin-top:22px;color:var(--ink-2);font-size:clamp(.95rem,.9rem + .2vw,1.05rem)}
.store-light{margin-top:32px;background:#fff;color:var(--ink);box-shadow:0 0 0 2.5px var(--line),0 6px 0 var(--line)}
.dl-hill{position:relative;height:clamp(190px,20vw,290px);margin-top:clamp(28px,4vw,48px)}
.dl-hill::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-60%;height:130%;border-radius:50% 50% 0 0/100% 100% 0 0;background:#B9E29F;box-shadow:inset 0 2.5px 0 var(--line)}
.dl-c{position:absolute;bottom:22%;width:clamp(96px,11vw,160px)}
.dl-koneri{left:calc(50% - clamp(220px,25vw,360px))}
.dl-pokke{left:calc(50% - clamp(110px,12vw,180px));bottom:28%;width:clamp(110px,12.5vw,180px)}
.dl-mito{left:calc(50% + clamp(10px,1vw,20px));bottom:27%}
.dl-fuu{left:calc(50% + clamp(120px,13vw,200px))}

/* ================= フッター ================= */
.ft{background:#B9E29F;padding:12px 0 40px;font-size:.88rem}
.ft-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.ft .brand{font-size:1.1rem}.ft .brand img{width:36px;height:36px}
.ft-nav{display:flex;flex-wrap:wrap;gap:4px 20px;font-family:var(--display);font-weight:700}
.ft-nav a{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:#2D4E3A}
.ft-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.ft small{display:block;width:100%;color:#345C3F;font-size:.78rem;letter-spacing:.06em}

/* ================= 動き ================= */
@media (prefers-reduced-motion:no-preference){
  .ht-1{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
  .ht-2 .ch{animation:pop .7s cubic-bezier(.3,1.6,.5,1) both}
  .ht-2 .c1{animation-delay:.25s}.ht-2 .c2{animation-delay:.33s}.ht-2 .c3{animation-delay:.41s}.ht-2 .c4{animation-delay:.49s}.ht-2 .c5{animation-delay:.57s}
  .ht-waves{animation:waves 2.4s ease-in-out .9s infinite}
  .hero-phone{animation:ring 5s ease-in-out 1.6s infinite}
  .hero-bubble{animation:bob 4.5s ease-in-out infinite}
  .fl1{animation:float1 6s ease-in-out infinite}.fl2{animation:float2 7s ease-in-out infinite}.fl3{animation:float1 6.5s ease-in-out .8s infinite}.fl4{animation:float2 5.5s ease-in-out .4s infinite}
  .hero-sky .cl1,.dl-sky .cl1{animation:drift 22s ease-in-out infinite alternate}
  .hero-sky .cl3,.dl-sky .cl2{animation:drift 26s ease-in-out infinite alternate-reverse}
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
  .js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}
}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
@keyframes pop{from{opacity:0;scale:.4;translate:0 .3em}}
@keyframes waves{0%,100%{opacity:1;scale:1}50%{opacity:.55;scale:.86}}
@keyframes ring{0%,86%,100%{rotate:0deg}88%{rotate:-2.5deg}90%{rotate:2.5deg}92%{rotate:-2deg}94%{rotate:2deg}96%{rotate:-1deg}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes float1{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes float2{0%,100%{translate:0 0}50%{translate:0 8px}}
@keyframes drift{to{translate:40px 0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
  *{transition:none!important}
}

/* ================= レスポンシブ ================= */
@media (max-width:1100px){
  .hd-nav{font-size:.82rem;gap:2px}.hd-nav a{padding:0 6px}
  .icon-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:20px 10px}
  .cards3{gap:14px}.card{padding:24px 22px 26px}
  .play h3{margin:18px 16px 0;font-size:1.02rem}.play h3 img{width:34px;height:34px}.play p{margin:8px 16px 22px;font-size:.84rem}
  .friend{padding:0 14px 24px}.f-desc{font-size:.84rem}
  .trust{grid-template-columns:1fr}
  .settings ul{grid-template-columns:1fr}
}
@media (max-width:1180px){
  .anno{display:none}
}
@media (max-width:980px){
  .hd-nav{display:none}
  .hd-cta{margin-left:auto}
}
@media (max-width:900px){
  .hero{padding-top:104px}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-art{justify-self:center;max-width:520px}
  .chap-head{grid-template-columns:1fr}
  .host{justify-self:end;margin:-30px 0 -40px;width:150px}
  .chap-head .chap-text{max-width:none}
  .talk-show{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:720px;margin-inline:auto}
  .cards3{grid-template-columns:1fr}
  .card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;padding:22px}
  .card img{grid-row:span 2;width:52px;height:52px}
  .card h3{margin-top:0}
  .card p{margin-top:6px}
  .safe{border-radius:28px;align-items:flex-start}
  .family{grid-template-columns:1fr}
  .family-phones{max-width:520px;margin-inline:auto;width:100%}
  .split{grid-template-columns:1fr}
  .split-phones{order:2;margin-inline:auto;width:100%}
  .play-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .play-pic{height:clamp(220px,44vw,330px)}
  .piano{grid-template-columns:1fr}
  .friends{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .room{grid-template-columns:1fr}
  .room-shot{order:2;width:min(70%,280px)}
  .parents-grid{grid-template-columns:1fr}
  .parents-phones{position:static;max-width:520px;margin-inline:auto;width:100%}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-grid{grid-template-columns:1fr}
  .faq-head{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .faq-head .chap-label{grid-column:1}
  .faq-head .chap-title{grid-column:1}
  .faq-pokke{grid-column:2;grid-row:1/3;width:110px;margin:0}
}
@media (max-width:620px){
  html{scroll-padding-top:80px}
  body{font-size:15px;line-height:1.95;letter-spacing:.03em}
  .hd{padding:10px 12px 0}
  .hd-bar{height:56px;padding:0 6px 0 8px}
  .brand{font-size:1.08rem;gap:8px}.brand img{width:36px;height:36px;border-radius:10px}
  .hd-cta{height:42px;padding:0 14px 0 12px;font-size:.8rem}
  .hero{padding:92px 0 90px}
  .hero-tag{font-size:.78rem;padding:5px 6px 5px 12px;gap:8px}
  .hero-title{margin-top:20px}
  .ht-1{font-size:clamp(1.7rem,8.4vw,2.4rem)}
  .hero-lead{margin-top:20px;font-size:.98rem}
  .hero-lead br{display:none}
  .hero-cta{margin-top:24px;gap:12px}
  .store{min-height:56px;padding:8px 20px 8px 16px;font-size:.98rem}
  .btn-ghost{min-height:52px;padding:0 20px;font-size:.92rem}
  .stamps{gap:10px;margin-top:24px}
  .st{width:66px;height:66px;font-size:.94rem}
  .hero-art{max-width:400px;margin-top:4px}
  .hero-bubble{top:24%;left:0}
  .hero-pokke{left:-1%;width:48%}
  .fl4{left:4%;top:13%}
  .fl3{right:-3%}
  .fl2{right:0}
  .apps-head{display:block}
  .apps-lead{margin-top:18px}
  .apps-lead br{display:none}
  .icon-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 10px}
  .icon-grid .dock:nth-last-child(2){grid-column:2}
  .talk-show .desc{display:none}
  .apps-note{padding:24px 20px 20px;font-size:.88rem}
  .ticker{margin:-30px 0 -20px;padding:12px 0}
  .ticker-track{gap:18px}.ticker svg{width:18px;height:18px}
  .chap{padding:88px 0 96px}
  .chap-label{font-size:.92rem;gap:10px}
  .chap-label .no{width:40px;height:40px;font-size:1.2rem}
  .chap-title{margin-top:18px;font-size:clamp(1.75rem,8vw,2.4rem);line-height:1.4}
  .chap .lead{margin-top:18px;font-size:.98rem}
  .host{width:120px;margin:-20px -6px -30px 0}
  .talk-show{gap:10px;margin-top:40px}
  .shot-in,.shot-b{margin-top:28px}
  .shot figcaption{font-size:.8rem;margin-top:18px}
  .shot figcaption strong{font-size:.94rem}
  .phone{box-shadow:0 0 0 2px var(--line),0 24px 30px -20px rgba(31,61,97,.45),0 10px 14px -10px rgba(31,61,97,.18)}
  .cards3{margin-top:48px}
  .card{padding:20px 18px}
  .card img{width:46px;height:46px}
  .card h3{font-size:1.08rem}
  .card p{font-size:.88rem}
  .safe{padding:18px 20px;gap:14px;font-size:.84rem}
  .safe-ic{width:42px;height:42px}.safe-ic svg{width:22px;height:22px}
  .family{padding:30px 20px 34px;margin-top:64px;border-radius:28px}
  .family-title{font-size:1.65rem}
  .family-phones,.split-phones{gap:14px}
  .gallery{gap:10px;margin-top:40px}
  .gallery .desc{display:none}
  .split{margin-top:64px}
  .row{padding:18px;gap:14px}.row img{width:46px;height:46px}.row h3{font-size:1.06rem}.row p{font-size:.88rem}
  .play-grid{gap:12px;margin-top:40px}
  .play-pic{height:clamp(190px,52vw,260px)}
  .play-pic .phone{top:18px;width:74%}
  .play h3{display:block;margin:14px 14px 0;font-size:.96rem;line-height:1.45}
  .play h3 img{display:inline-block;vertical-align:-8px;width:28px;height:28px;margin-right:6px}
  .play p{margin:6px 14px 18px;font-size:.8rem;line-height:1.85}
  .piano{padding:18px 18px 40px}
  .friends{gap:48px 12px;margin-top:64px}
  .friend{padding:0 10px 20px}
  .f-pic{margin-top:-28px}
  .f-q{font-size:.82rem;padding:6px 10px;margin-top:10px}
  .friend h3{font-size:1.4rem;margin-top:12px}
  .f-desc{font-size:.8rem;line-height:1.85}
  .room{margin-top:64px}
  .trust{grid-template-columns:1fr}
  .tr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;padding:20px}
  .tr-ic{grid-row:span 2;width:46px;height:46px;border-radius:14px}.tr-ic svg{width:26px;height:26px}
  .tr h3{margin-top:0;font-size:1.04rem}.tr p{font-size:.86rem}
  .settings{padding:22px 18px}
  .settings ul{grid-template-columns:1fr}
  summary{gap:12px;padding:16px;font-size:.94rem}
  summary .q{width:34px;height:34px;font-size:.95rem}
  summary .plus{width:28px;height:28px}
  .answer{padding:0 18px 20px 62px;font-size:.88rem}
  .faq-pokke{width:90px}
  .dl-title{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .dl-hill{height:170px}
  .dl-c{width:84px}
  .dl-koneri{left:calc(50% - 180px)}
  .dl-pokke{left:calc(50% - 92px);width:96px}
  .dl-mito{left:calc(50% + 4px)}
  .dl-fuu{left:calc(50% + 92px)}
}
@media (max-width:380px){
  :root{--gut:16px}
  .stamps .st{width:60px;height:60px;font-size:.86rem}
  .icon-grid{gap:16px 8px}
  .icon-grid li{font-size:.72rem}
  .play-grid{grid-template-columns:1fr 1fr}
  .dl-c{width:72px}
  .dl-koneri{left:calc(50% - 156px)}.dl-pokke{left:calc(50% - 80px);width:84px}.dl-fuu{left:calc(50% + 80px)}
}
@media print{
  .hd,.skip-link,.ticker,.dl-hill,.floaters{display:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
}

/* ================= プライバシーポリシー（privacy.html） ================= */
.pp{background:var(--paper)}
.pp-hero{position:relative;overflow:clip;padding:clamp(120px,12vw,160px) 0 clamp(80px,8vw,110px);background:var(--grain),linear-gradient(180deg,#CDE9FB 0%,#DDF1FD 50%,#EDF8FF 100%)}
.pp-hero .cl1{top:30%}
.pp-hero .cl3{bottom:12%}
.pp-hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px}
.pp-head{--accent:var(--blue);--accent-ink:#2370BD}
.pp-title{margin-top:22px;font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,1rem + 5vw,5.4rem);line-height:1.2;letter-spacing:.02em}
.pp-date{margin-top:20px;font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--ink-2);letter-spacing:.06em}
.pp-note{display:inline-block;margin-top:18px;padding:12px 20px;border-radius:18px;background:#fff;font-size:.92rem;line-height:1.8;color:var(--ink-2);box-shadow:0 8px 20px -14px rgba(31,61,97,.4)}
.pp-host{width:clamp(130px,15vw,210px);margin-bottom:-16px}
.pp-body{--bg:var(--paper);position:relative;padding:clamp(56px,7vw,96px) 0 clamp(96px,10vw,140px);background:var(--paper) var(--grain)}
.pp-grid{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);align-items:start;gap:clamp(28px,4vw,64px)}
.toc{position:sticky;top:104px}
.toc-box,.toc-box[open]{border-radius:24px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.toc-box summary{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 10px;font-family:var(--display);font-weight:900;font-size:1rem;letter-spacing:.1em;cursor:default;pointer-events:none}
.toc-box summary .plus{display:none}
.toc-box ol{list-style:none;margin:0;padding:4px 10px 16px;counter-reset:toc;max-height:calc(100vh - 190px);overflow:auto}
.toc-box li{counter-increment:toc}
.toc-box a{word-break:keep-all;overflow-wrap:anywhere;display:grid;grid-template-columns:2.2em minmax(0,1fr);align-items:baseline;padding:6px 12px;border-radius:12px;font-family:var(--display);font-weight:700;font-size:.84rem;line-height:1.55;color:var(--ink-2);letter-spacing:.02em;transition:background .2s,color .2s}
.toc-box a::before{content:counter(toc,decimal-leading-zero);font-size:.76rem;color:var(--ink-3)}
.toc-box a:hover{background:var(--sky-1);color:var(--ink)}
.policy{counter-reset:sec;padding:clamp(28px,4.4vw,64px);border-radius:clamp(28px,3vw,40px);background:#fff;box-shadow:var(--shadow)}
.policy h2{counter-increment:sec;display:flex;align-items:center;gap:14px;margin:clamp(40px,4vw,56px) 0 16px;padding-top:clamp(28px,3vw,40px);border-top:1.5px dashed #E6DCC8;font-family:var(--display);font-weight:900;font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);line-height:1.45;letter-spacing:.03em;scroll-margin-top:110px}
.policy h2:first-child{margin-top:0;padding-top:0;border-top:0}
.policy h2::before{content:counter(sec,decimal-leading-zero);display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:40% 60% 55% 45%/50% 45% 55% 50%;background:var(--sky-1);color:#2370BD;font-size:.92rem;letter-spacing:0}
.policy p,.policy li{max-width:40em;font-size:1rem;line-height:2.05;color:var(--ink-2)}
.policy p+p{margin-top:1em}
.policy ul{margin:.6em 0 0;padding-left:1.3em;list-style:disc}
.policy li::marker{color:var(--blue)}
.policy li+li{margin-top:.5em}
.policy a{color:#2370BD;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.policy-back{margin-top:clamp(44px,5vw,64px);padding-top:28px;border-top:1.5px dashed #E6DCC8}
.policy .policy-back a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:.95rem;text-decoration:none;letter-spacing:.04em}
.policy-back svg,.pp-nav svg{width:18px;height:18px}
.pp-nav a{gap:8px}
.pp .ft{padding-top:36px}
@media (max-width:980px){
  .pp .hd-nav.pp-nav{display:flex}
}
@media (max-width:900px){
  .pp-grid{grid-template-columns:1fr}
  .toc{position:static}
  .toc-box summary{cursor:pointer;pointer-events:auto;padding:16px 20px}
  .toc-box summary .plus{display:block;position:relative;width:30px;height:30px;border-radius:50%;background:var(--sky-1);transition:transform .3s}
  .toc-box summary .plus::before,.toc-box summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
  .toc-box summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
  .toc-box[open] summary .plus{transform:rotate(45deg)}
  .toc-box ol{max-height:none;columns:2;column-gap:8px}
  .toc-box li{break-inside:avoid}
}
@media (max-width:620px){
  .pp-hero{padding:100px 0 64px}
  .pp-hero-inner{display:block}
  .pp-title{font-size:clamp(1.9rem,10vw,2.8rem)}
  .pp-host{position:absolute;right:-6px;top:-14px;width:84px;margin:0}
  .pp-note{font-size:.86rem;padding:10px 16px}
  .pp .hd-nav.pp-nav a{font-size:0;gap:0;padding:0 10px}
  .pp .hd-nav.pp-nav svg{width:20px;height:20px}
  .toc-box ol{columns:1}
  .policy{padding:26px 20px 30px;border-radius:26px}
  .policy h2{gap:10px;font-size:1.12rem}
  .policy h2::before{width:38px;height:38px;font-size:.82rem}
  .policy p,.policy li{font-size:.95rem;line-height:2}
}