/* ================================================================
   超ぴゅあ娘 storybook splash  v1
   サイト初回訪問時だけ表示する「魔法の絵本」スプラッシュ
   2回目以降は冒頭スプラッシュを出さず、ページを直接表示する
   ================================================================ */

/* 初回・再訪問とも、従来のパンダスプラッシュを描かせない */
html.js #splash-screen, html.sb-first #splash-screen{display:none !important;}
html.sb-first,html.sb-first body{overflow:hidden;}

.no-js #storybook{display:none !important;}

#storybook{
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;padding:0 16px 66px;
  background:#0b0618 url("images/storybook/sb-room.jpg?v=20260925book3") center/cover no-repeat;
  overflow:hidden;
  animation:sbCandle 6.5s ease-in-out infinite;
}
@keyframes sbCandle{0%,100%{filter:brightness(1) saturate(1);}38%{filter:brightness(1.07) saturate(1.05);}64%{filter:brightness(.96) saturate(.99);}}

/* 窓から差す光の筋 */
#storybook .sb-shafts{position:absolute;inset:-10% -20%;pointer-events:none;mix-blend-mode:screen;
  background:
    linear-gradient(103deg, transparent 18%, rgba(255,226,170,.16) 22%, transparent 27%),
    linear-gradient(103deg, transparent 38%, rgba(255,214,190,.10) 41%, transparent 45%),
    linear-gradient(103deg, transparent 62%, rgba(255,232,190,.13) 67%, transparent 72%);
  animation:sbShaft 11s ease-in-out infinite;}
@keyframes sbShaft{0%,100%{opacity:.75;transform:translateX(0);}50%{opacity:1;transform:translateX(14px);}}

/* 舞う塵と光の粒（奥行きでぼけ具合を変える） */
#storybook .sb-dust{position:absolute;inset:0;pointer-events:none;}
#storybook .sb-dust i{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle,#fff 0,rgba(255,236,196,.9) 40%,rgba(255,210,150,0) 72%);
  animation:sbDrift linear infinite;
}
@keyframes sbDrift{
  0%{transform:translate3d(0,0,0) scale(.8);opacity:0;}
  12%{opacity:1;}
  80%{opacity:.85;}
  100%{transform:translate3d(26px,-320px,0) scale(1.15);opacity:0;}
}
#storybook .sb-stars{position:absolute;inset:0;pointer-events:none;}
#storybook .sb-stars span{position:absolute;color:#fff6dd;text-shadow:0 0 14px rgba(255,208,140,.95),0 0 28px rgba(255,150,210,.6);
  animation:sbTwinkle 2.8s ease-in-out infinite;}
@keyframes sbTwinkle{0%,100%{opacity:.12;transform:scale(.7) rotate(0);}50%{opacity:1;transform:scale(1.25) rotate(25deg);}}

/* 本の下の光だまり */
#storybook .sb-pool{
  position:absolute;left:50%;top:58%;width:min(120vw,900px);height:min(70vh,520px);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,206,140,.40) 0, rgba(255,150,205,.18) 38%, rgba(255,150,205,0) 70%);
  filter:blur(6px);animation:sbPool 5s ease-in-out infinite;
}
@keyframes sbPool{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07);}}

.sb-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;
  margin-top:3vh;perspective:1700px;transform-origin:50% 44%;animation:sbFloat 6s ease-in-out infinite;}
@keyframes sbFloat{0%,100%{transform:translateY(0) rotate(-.25deg);}50%{transform:translateY(-7px) rotate(.25deg);}}

/* ---- 本体（机に置かれた厚い革装丁） ---- */
.sb-book{
  position:relative;width:min(70vw,300px);aspect-ratio:3/4;
  transform-style:preserve-3d;transform:rotateX(19deg) rotateY(-17deg);
}
/* 机への接地影 */
.sb-book:before{
  content:"";position:absolute;left:-14%;right:-22%;bottom:-13%;height:26%;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.82) 0, rgba(0,0,0,.45) 42%, rgba(0,0,0,0) 74%);
  filter:blur(9px);transform:translateZ(-30px) rotateX(-19deg);z-index:0;
}
/* 背表紙 */
.sb-spine{
  position:absolute;left:-15px;top:-3px;bottom:-3px;width:26px;border-radius:10px 2px 2px 10px;
  transform:translateZ(0);
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0 12%, rgba(255,226,180,.20) 30%, rgba(0,0,0,.38) 58%, rgba(0,0,0,.75) 100%),
    url("images/storybook/sb-leather.jpg?v=20260925book3") center/cover;
  box-shadow:inset 0 0 10px rgba(0,0,0,.75);
}
.sb-spine:before,.sb-spine:after{
  content:"";position:absolute;left:2px;right:2px;height:5px;border-radius:2px;
  background:linear-gradient(90deg,#8a6222,#f0cf85,#8a6222);opacity:.85;
}
.sb-spine:before{top:16%;} .sb-spine:after{bottom:16%;}
/* 小口（ページの厚み・右） */
.sb-edge{
  position:absolute;right:-19px;top:8px;bottom:8px;width:23px;border-radius:2px 7px 7px 2px;
  transform:translateZ(0);
  background:
    linear-gradient(90deg, rgba(90,62,26,.55) 0 3px, rgba(255,255,255,0) 14px),
    repeating-linear-gradient(180deg,#f2e7c9 0 2px,#d7c49c 2px 3.2px,#c6b189 3.2px 4px);
  box-shadow:inset -5px 0 9px rgba(110,80,40,.6), 3px 3px 10px rgba(0,0,0,.55);
}
/* 小口（上） */
.sb-edge-top{
  position:absolute;left:6px;right:-15px;top:-16px;height:20px;border-radius:5px 5px 2px 2px;
  transform:translateZ(0);
  background:repeating-linear-gradient(90deg,#f4eace 0 2px,#dbc9a1 2px 3.2px,#cab58c 3.2px 4px);
  box-shadow:inset 0 -5px 9px rgba(110,80,40,.5), 0 -2px 8px rgba(0,0,0,.45);
}
/* 裏表紙（板の厚み） */
.sb-back{
  position:absolute;inset:-5px -6px -6px 0;border-radius:6px 15px 15px 6px;
  transform:translateZ(-22px);
  background:#3a140f url("images/storybook/sb-leather.jpg?v=20260925book3") center/cover;
  box-shadow:inset 0 0 0 1px rgba(255,220,150,.18), 0 0 26px rgba(0,0,0,.6);
  filter:brightness(.55);
}
.sb-pages{position:absolute;inset:0;transform-style:preserve-3d;}
.sb-page{
  position:absolute;inset:6px 4px 6px 0;border-radius:2px 9px 9px 2px;
  background:
    linear-gradient(90deg, rgba(120,92,50,.38) 0 7px, rgba(255,255,255,0) 26px),
    url("images/storybook/sb-paper.jpg?v=20260925book3") center/cover;
  box-shadow:inset -8px 0 18px rgba(150,115,70,.22);
  transform-origin:left center;backface-visibility:hidden;
}
.sb-page:nth-child(1){transform:translateZ(12px);}
.sb-page:nth-child(2){transform:translateZ(9px);}
.sb-page:nth-child(3){transform:translateZ(6px);}
.sb-page:nth-child(4){transform:translateZ(3px);}
.sb-page:nth-child(5){transform:translateZ(0);}
.sb-page:nth-child(6){transform:translateZ(-3px);}
.sb-page:nth-child(7){transform:translateZ(-6px);}
.sb-page:nth-child(8){transform:translateZ(-9px);}
.sb-page:nth-child(9){transform:translateZ(-12px);}
.sb-page:nth-child(10){transform:translateZ(-15px);}

/* ライセンス表記 */
.sb-copy{
  position:absolute;left:0;right:0;bottom:20px;z-index:5;text-align:center;
  font-size:11px;letter-spacing:.14em;color:rgba(255,226,186,.58);
  text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none;
}

/* 表紙：革＋金の額 */
.sb-cover{
  container-type:inline-size;
  position:absolute;inset:-4px -4px -4px 0;border-radius:5px 14px 14px 5px;
  transform-origin:left center;transform:translateZ(17px);
  background:#5a1e4a url("images/storybook/sb-leather.jpg?v=20260925book3") center/cover;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,150,.28),
    inset -14px 0 30px rgba(0,0,0,.45),
    inset 12px 0 22px rgba(255,255,255,.07),
    0 0 26px rgba(255,180,120,.18);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sb-cover .sb-fit{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:2;}
.sb-cover .sb-panda{
  position:absolute;left:50%;top:34.5%;transform:translate(-50%,-50%);
  width:44%;height:auto;z-index:3;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,236,190,.35), 0 6px 16px rgba(0,0,0,.55), inset 0 0 20px rgba(0,0,0,.3);
  filter:drop-shadow(0 0 14px rgba(255,214,150,.45));
}
.sb-title{
  position:absolute;left:8%;right:8%;top:64%;z-index:3;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.sb-title .sb-en{
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;
  font-size:6.2%;font-size:clamp(15px,6.2cqw,26px);letter-spacing:.01em;line-height:1.15;
  background:linear-gradient(180deg,#fff7de 0%,#f0cf85 40%,#c79a3c 70%,#ffeec2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(60,32,8,.9)) drop-shadow(0 2px 5px rgba(0,0,0,.6));
}
.sb-title .sb-rule{width:54%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#e8c684,#fff3d4,#e8c684,transparent);
  box-shadow:0 0 8px rgba(255,200,120,.55);}
.sb-title .sb-ja{
  font-weight:900;letter-spacing:.14em;
  font-size:clamp(13px,4.6cqw,20px);color:#ffeec6;
  text-shadow:0 1px 0 rgba(60,32,8,.95),0 2px 6px rgba(0,0,0,.65),0 0 16px rgba(255,190,110,.5);
}
/* 留め金 */
.sb-clasp{
  position:absolute;right:-9px;top:44%;width:30px;height:12%;z-index:4;border-radius:4px;
  background:linear-gradient(180deg,#f3dda6,#c79a3c 40%,#8a6222 70%,#e0c288 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.65);
}
.sb-clasp:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg,#fff3d4,#b98c30);box-shadow:inset 0 0 3px rgba(80,50,10,.8);}
/* 革の上を走る反射 */
.sb-foil{position:absolute;top:-20%;bottom:-20%;width:38%;left:-60%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,240,205,.30),rgba(255,255,255,.55),rgba(255,240,205,.22),transparent);
  transform:rotate(8deg);filter:blur(2px);animation:sbFoil 4.6s ease-in-out infinite;}
@keyframes sbFoil{0%{left:-60%;}48%{left:115%;}100%{left:115%;}}
/* 開くときの陰影 */
.sb-shade{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.30) 40%, rgba(0,0,0,0) 78%);}

/* ---- ボタン ---- */
.sb-btn{
  position:relative;border:0;cursor:pointer;font-family:inherit;
  font-size:16px;font-weight:900;letter-spacing:.1em;color:#2a1608;
  padding:15px 34px;border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,#fff3cf 0%,#f3d489 28%,#d3a445 56%,#f6e0a6 78%,#c79a3c 100%);
  box-shadow:0 12px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(120,80,20,.5), 0 0 26px rgba(255,190,110,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  animation:sbPulse 2.2s ease-in-out infinite;
}
.sb-btn:hover{filter:brightness(1.07);}
.sb-btn:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
  animation:sbFoil 3.4s ease-in-out infinite .5s;}
@keyframes sbPulse{0%,100%{transform:scale(1);box-shadow:0 12px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(120,80,20,.5), 0 0 22px rgba(255,190,110,.3);}
  50%{transform:scale(1.04);box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 4px rgba(120,80,20,.5), 0 0 40px rgba(255,205,130,.65);}}
.sb-hint{
  font-size:12px;color:rgba(255,240,212,.92);letter-spacing:.14em;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  animation:sbHint 2.2s ease-in-out infinite;
}
@keyframes sbHint{0%,100%{opacity:.6;}50%{opacity:1;}}

.sb-flash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 44%, #fffdf6 0%, #ffe9c2 26%, rgba(255,214,160,0) 70%);}

/* ---- 開く ---- */
#storybook.sb-go .sb-btn{animation:none;opacity:0;transform:scale(.82) translateY(8px);transition:opacity .3s ease,transform .3s ease;}
#storybook.sb-go .sb-hint{opacity:0;transition:opacity .25s ease;}
#storybook.sb-go .sb-flash{animation:sbFlash 1.5s ease-out both;}
@keyframes sbFlash{0%{opacity:0;}10%{opacity:.95;}34%{opacity:.25;}70%{opacity:.5;}100%{opacity:1;}}
#storybook.sb-go .sb-pool{animation:sbPoolBurst 1.5s ease-out both;}
@keyframes sbPoolBurst{0%{opacity:.8;transform:translate(-50%,-50%) scale(1);}100%{opacity:1;transform:translate(-50%,-50%) scale(2.6);}}

#storybook.sb-go .sb-cover{animation:sbCoverOpen .95s cubic-bezier(.34,.72,.19,1) .1s both;}
@keyframes sbCoverOpen{from{transform:translateZ(17px) rotateY(0);}to{transform:translateZ(17px) rotateY(-172deg);}}
#storybook.sb-go .sb-shade{animation:sbShade .95s ease-in .1s both;}
@keyframes sbShade{0%{opacity:0;}45%{opacity:.85;}100%{opacity:.2;}}

#storybook.sb-go .sb-page{animation:sbFlip .30s cubic-bezier(.5,0,.6,1) both;}
#storybook.sb-go .sb-page:nth-child(1){animation-delay:0.44s;}
#storybook.sb-go .sb-page:nth-child(2){animation-delay:0.52s;}
#storybook.sb-go .sb-page:nth-child(3){animation-delay:0.59s;}
#storybook.sb-go .sb-page:nth-child(4){animation-delay:0.67s;}
#storybook.sb-go .sb-page:nth-child(5){animation-delay:0.74s;}
#storybook.sb-go .sb-page:nth-child(6){animation-delay:0.81s;}
#storybook.sb-go .sb-page:nth-child(7){animation-delay:0.89s;}
#storybook.sb-go .sb-page:nth-child(8){animation-delay:0.97s;}
#storybook.sb-go .sb-page:nth-child(9){animation-delay:1.04s;}
#storybook.sb-go .sb-page:nth-child(10){animation-delay:1.11s;}
@keyframes sbFlip{
  0%{transform:rotateY(0);box-shadow:inset -8px 0 18px rgba(150,115,70,.22);}
  50%{box-shadow:inset -40px 0 60px rgba(90,60,25,.45);}
  100%{transform:rotateY(-174deg);box-shadow:inset 8px 0 18px rgba(150,115,70,.22);}
}

#storybook.sb-go .sb-stage{animation:sbSuck 1.05s cubic-bezier(.58,0,.86,.18) 1.05s both;}
@keyframes sbSuck{
  0%{transform:scale(1) rotate(0);opacity:1;filter:blur(0);}
  50%{transform:scale(2.8) rotate(-2deg);opacity:1;filter:blur(1.5px);}
  100%{transform:scale(13) rotate(-5deg);opacity:0;filter:blur(14px);}
}
#storybook.sb-go{animation:sbCandle 6.5s ease-in-out infinite, sbOut .55s ease 1.75s both;}
@keyframes sbOut{to{opacity:0;visibility:hidden;}}

@media (min-width:960px){
  .sb-book{width:350px;}
  .sb-copy{font-size:12px;bottom:24px;}
  
  
  .sb-btn{font-size:18px;padding:17px 46px;}
}