/* かなざわ みんわえほん ― めくる絵本の共通スタイル(加賀五彩テーマ) */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');
:root{
  --washi:#F4ECDA;
  --sumi:#38302A;
  --kin:#C9A227;
  --kin-bright:#F2D064;
  --cover:#2B4A5F;
  --desk:#FFF8EE;
  /* 加賀五彩(ポップ寄りの値) */
  --enji:#C8364E; --ai:#2B5FB4; --odo:#E2A21B; --kusa:#3F9B57; --murasaki:#7D4FAA;
  --cream:#FFF8EE; --ink:#1B2A4A;
  --round:"M PLUS Rounded 1c","Zen Maru Gothic",var(--sans);
  --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN",var(--sans);
  --pw:360px;
  --ph:480px;
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","BIZ UDMincho",serif;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .15 1.4 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cloth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23fff' stroke-width='.6' opacity='.07'/%3E%3Cpath d='M0 0L6 6' stroke='%23000' stroke-width='.6' opacity='.08'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--maru);
  color:var(--ink);
  background:var(--desk);
  transition:background 1.2s ease;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
/* 机の上の五彩の図形 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 7% 14%, var(--odo) 0 64px, transparent 65px),
    radial-gradient(circle at 94% 10%, var(--murasaki) 0 40px, transparent 41px),
    radial-gradient(circle at 96% 92%, var(--ai) 0 120px, transparent 121px),
    radial-gradient(circle at 3% 90%, var(--kusa) 0 70px, transparent 71px),
    radial-gradient(circle at 80% 50%, var(--enji) 0 16px, transparent 17px),
    radial-gradient(circle at 16% 52%, var(--ai) 0 10px, transparent 11px);
  opacity:.9;
}
/* 上端の五彩の帯 */
body::after{
  content:"";position:fixed;left:0;right:0;top:0;height:8px;z-index:70;pointer-events:none;
  background:linear-gradient(90deg, var(--enji) 0 20%, var(--ai) 20% 40%, var(--odo) 40% 60%, var(--kusa) 60% 80%, var(--murasaki) 80%);
}
.toc{
  position:fixed;top:14px;left:16px;z-index:60;
  font-family:var(--round);font-size:.78rem;letter-spacing:.12em;
  color:var(--ink);text-decoration:none;
  background:var(--cream);border:2.5px solid var(--ink);border-radius:999px;
  padding:6px 14px;box-shadow:0 3px 0 var(--ink);
}
/* 画面に固定した部屋。めくったページがはみ出しても横スクロールを作らない */
.room{
  position:fixed;inset:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}

/* ---------- 本 ---------- */
.stage{position:relative;z-index:1;margin-top:18px;}
.book{
  position:relative;
  width:calc(var(--pw) * 2);
  height:var(--ph);
  perspective:2400px;
  transition:transform .9s cubic-bezier(.4,.12,.2,1);
  user-select:none;-webkit-user-select:none;
  touch-action:pan-y;
}
.mode-single .book{width:var(--pw);}
.leaf{
  position:absolute;top:0;left:0;
  width:var(--pw);height:var(--ph);
  transform-origin:right center;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.4,.12,.2,1);
  cursor:pointer;
}
.leaf.flipped{transform:rotateY(180deg);}
.mode-single .leaf{transition:transform .8s cubic-bezier(.4,.12,.2,1), opacity .3s ease;}
.mode-single .leaf.flipped{opacity:0;transition:transform .8s cubic-bezier(.4,.12,.2,1), opacity .35s ease .45s;}
.no-anim, .no-anim *{transition:none !important;}

.face{
  position:absolute;inset:0;
  overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-color:var(--washi);
  background-image:var(--paper);
  box-shadow:0 0 0 3px var(--ink), 0 9px 0 3px var(--ink);
}
.face.back{transform:rotateY(180deg);}
/* のど(綴じ側)の影 */
.face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;}
.mode-spread .face.front::after{background:linear-gradient(to left, rgba(40,25,10,.26), rgba(40,25,10,0) 9%);}
.mode-spread .face.back::after{background:linear-gradient(to right, rgba(40,25,10,.26), rgba(40,25,10,0) 9%);}
.mode-single .face.front::after{background:linear-gradient(to left, rgba(40,25,10,.16), rgba(40,25,10,0) 6%);}
/* めくっている最中の陰影 */
.leaf.turning .face::before{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(to left, rgba(20,12,4,.32), rgba(20,12,4,0) 70%);
  animation:ehon-shade .9s ease forwards;
}
.leaf.turning .face.back::before{background:linear-gradient(to right, rgba(20,12,4,.32), rgba(20,12,4,0) 70%);}
@keyframes ehon-shade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.pno{
  position:absolute;bottom:3.2%;left:0;right:0;text-align:center;z-index:4;
  font-family:var(--round);
  font-size:calc(var(--pw) / 34);letter-spacing:.1em;
  pointer-events:none;
}
.face:not(.is-illust) .pno{color:var(--accent, var(--cover));opacity:.9;}
.face.is-illust .pno{color:var(--pfg, #38302A);opacity:.6;}
/* 絵を少しあざやかに */
.s-illust svg.full, .cover > svg{filter:saturate(1.28) contrast(1.04);}

/* ---------- 絵のページ ---------- */
.s-illust{
  position:absolute;inset:0;
  background:var(--sbg);
  color:var(--sfg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  container-type:size;
  overflow:hidden;
}
.s-illust svg.full{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* ---------- 文のページ(縦書き) ---------- */
.s-text{
  position:absolute;inset:0;
  writing-mode:vertical-rl;
  display:flex;flex-direction:column;gap:1.6em;
  padding:11% 10% 12%;
  justify-content:center;   /* 縦書きの文を左右まんなかに */
}
.story{
  font-size:calc(var(--pw) / 21.5);
  font-weight:500;
  line-height:2;
  letter-spacing:.1em;
  color:var(--ink);
}
.s-text.long .story{font-size:calc(var(--pw) / 24.5);}
.kana-big{font-size:1.3em;letter-spacing:.3em;font-family:var(--round);color:var(--accent, var(--cover));}
.hint{
  font-family:var(--sans);
  font-size:calc(var(--pw) / 34);
  letter-spacing:.18em;
  opacity:.7;
}

/* ---------- スマホ:1ページに絵+文 ---------- */
.combo{position:absolute;inset:0;display:flex;flex-direction:column;}
/* 文は必要なだけの高さを取り、残りを絵に(絵は下寄せトリミングなので縮んでも人物は残る) */
.mode-single .combo .s-illust{position:relative;inset:auto;flex:1 1 0;min-height:44%;}
.mode-single .combo .s-text{
  position:relative;inset:auto;flex:0 0 auto;max-height:56%;
  writing-mode:horizontal-tb;
  overflow:auto;
  padding:5.5% 7% 7%;
  gap:.9em;
}
.mode-single .story, .mode-single .s-text.long .story{
  font-size:clamp(13.5px, calc(var(--pw) / 24), 16px);
  line-height:1.95;letter-spacing:.07em;
}
.mode-single .hint{font-size:11px;}

/* ---------- 表紙・裏表紙 ---------- */
.cover, .backcover{
  position:absolute;inset:0;overflow:hidden;
  background-color:var(--cover);background-image:var(--cloth);
  color:#EDE3CC;
}
.cover > svg, .backcover > svg{position:absolute;inset:0;width:100%;height:100%;}
.cover-grain{position:absolute;inset:0;width:100%;height:100%;opacity:.7;pointer-events:none;}
.toji{position:absolute;top:0;bottom:0;width:6%;height:100%;pointer-events:none;}
.cover .toji{right:0;}
.backcover .toji{left:0;}
.daisen{
  position:absolute;left:10%;top:7%;
  width:19%;height:60%;
  background-color:var(--cream);
  border:3px solid var(--ink);border-radius:6px;
  box-shadow:4px 5px 0 var(--ink);
  display:flex;justify-content:center;padding-top:9%;
}
.daisen h1{
  writing-mode:vertical-rl;
  font-family:var(--round);
  font-size:calc(var(--pw) / 12.5);
  font-weight:800;letter-spacing:.14em;
  color:var(--ink);
  white-space:nowrap;
}
.daisen.long h1{font-size:calc(var(--pw) / 15.5);letter-spacing:.14em;}
.series{
  position:absolute;left:33%;top:8%;
  writing-mode:vertical-rl;
  font-family:var(--round);
  font-size:calc(var(--pw) / 28);
  letter-spacing:.36em;
  color:var(--cream);
}
.back-card{
  position:absolute;left:16%;right:16%;top:22%;
  background-color:var(--cream);
  color:var(--ink);
  padding:10% 8%;
  text-align:center;
  border:3px solid var(--ink);border-radius:14px;
  box-shadow:5px 6px 0 var(--ink);
  display:flex;flex-direction:column;gap:1.2em;align-items:center;
}
.back-card .owari{font-family:var(--round);font-size:calc(var(--pw) / 13);letter-spacing:.3em;padding-left:.3em;color:var(--accent, var(--cover));}
.back-card .credit{font-family:var(--sans);font-size:calc(var(--pw) / 36);line-height:2;letter-spacing:.1em;opacity:.75;}
.back-card a{color:inherit;font-family:var(--sans);font-size:calc(var(--pw) / 30);letter-spacing:.22em;}

/* ---------- 操作UI ---------- */
.nav{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:22px;
  font-family:var(--round);color:var(--ink);
}
.nav button{
  appearance:none;border:3px solid var(--ink);background:var(--accent, var(--cover));
  color:#fff;font:inherit;font-size:.82rem;letter-spacing:.12em;
  padding:9px 18px;border-radius:999px;cursor:pointer;
  box-shadow:0 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
  white-space:nowrap;
}
@media (max-width:440px){ .nav{gap:8px;} .nav button{padding:7px 12px;font-size:.74rem;} .nav .count{min-width:4.6em;font-size:.72rem;} }
/* ぷるぷる(ゼリーのようにゆれる) */
@keyframes ehon-puru{
  0%{scale:1 1;} 25%{scale:1.08 .92;} 45%{scale:.94 1.06;} 65%{scale:1.03 .97;} 85%{scale:.99 1.01;} 100%{scale:1 1;}
}
.nav button:not(:disabled):hover, .toc:hover, .back-card a:hover{animation:ehon-puru .55s ease;}
.nav button:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);}
.nav button:disabled{background:var(--cream);color:var(--ink);opacity:.35;cursor:default;}
.nav .count{font-size:.8rem;letter-spacing:.12em;min-width:6.5em;text-align:center;background:var(--cream);border:2.5px solid var(--ink);border-radius:999px;padding:6px 10px;}
.first-hint{
  position:relative;z-index:2;
  font-family:var(--maru);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  color:var(--ink);opacity:.75;
  transition:opacity .6s ease;
  text-align:center;padding:0 16px;
}

/* ---------- こすって見せる(しかけ共通) ---------- */
.scratch-stage{
  position:relative;
  width:min(76cqw, 64cqh);
  aspect-ratio:1/1;
  touch-action:none;
}
.scratch-stage > svg, .scratch-stage > canvas{position:absolute;inset:0;width:100%;height:100%;}
.scratch-stage canvas{cursor:crosshair;border-radius:6px;}
.scratch-stage.done canvas{opacity:0;transition:opacity .9s ease;pointer-events:none;}
.scratch-hint{font-family:var(--sans);font-size:clamp(10px, 3.4cqw, 13px);letter-spacing:.14em;opacity:.8;transition:opacity .5s;text-align:center;padding:0 6%;}
.scratch-result{
  font-size:clamp(14px, 6cqw, 22px);letter-spacing:.3em;color:var(--kin-bright);
  opacity:0;transform:scale(.8);
  transition:opacity .8s ease .3s, transform .8s cubic-bezier(.2,1.4,.4,1) .3s;
  position:absolute;bottom:6%;
}
.scratch-result.show{opacity:1;transform:scale(1);}

/* ---------- きらめき・舞うもの ---------- */
.tw{animation:ehon-twinkle 2.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
.tw.d1{animation-delay:.5s}.tw.d2{animation-delay:1.1s}.tw.d3{animation-delay:1.7s}
@keyframes ehon-twinkle{0%,100%{opacity:.25;transform:scale(.7);}50%{opacity:1;transform:scale(1.15);}}
.smoke{animation:ehon-smoke 5s ease-in-out infinite;}
@keyframes ehon-smoke{0%,100%{opacity:.75;transform:translateY(0);}50%{opacity:.35;transform:translateY(-4px);}}
.sway{animation:ehon-sway 4s ease-in-out infinite;transform-origin:bottom center;transform-box:fill-box;}
@keyframes ehon-sway{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
.particle{
  position:fixed;pointer-events:none;z-index:50;
  animation-timing-function:linear;animation-fill-mode:forwards;
}
.particle.flake{
  top:-30px;width:14px;height:10px;
  background:linear-gradient(120deg,var(--kin-bright),var(--kin));
  opacity:.95;border-radius:2px 6px 3px 5px;
  animation-name:ehon-fall;
}
.particle.petal{
  top:-30px;width:12px;height:9px;
  background:radial-gradient(circle at 30% 30%, #FBE3E6, #EDB3BC);
  border-radius:60% 0 60% 0;opacity:.95;
  animation-name:ehon-fall;
}
.particle.mote{
  bottom:-20px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle, #FFF6D8, rgba(242,208,100,.6) 45%, rgba(242,208,100,0) 70%);
  animation-name:ehon-rise;
}
@keyframes ehon-fall{0%{transform:translateY(0) rotate(0deg);}100%{transform:translateY(110vh) rotate(540deg);opacity:.7;}}
@keyframes ehon-rise{0%{transform:translateY(0) translateX(0);opacity:0;}15%{opacity:1;}100%{transform:translateY(-110vh) translateX(20px);opacity:0;}}

@media (prefers-reduced-motion: reduce){
  .nav button, .toc, .back-card a{animation:none !important;}
  .leaf, .book, .mode-single .leaf, .mode-single .leaf.flipped{transition-duration:.01s !important;transition-delay:0s !important;}
  .tw, .smoke, .sway, .leaf.turning .face::before{animation:none;}
  .particle{animation-duration:.01s !important;}
}