/* まぜテクランド：化石の出土 → 復元 → すがた、を画面いっぱいの場面でたどり、そのあと調査の記録（なかまたち ほか）へ */
:root { --ink: #4a3f6b; --soft: #7d73a6; --pink: #e86aa6; --sky: #58bfe8; --salmon: #f08a6c; --card: rgba(255,255,255,.88); --sumi: #2b2a2c;
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; --fude: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--font); font-weight: 500; font-size: 17px; line-height: 2; letter-spacing: .04em; background: #e6def2; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink); }
rt { font-size: .5em; letter-spacing: 0; }
.wrap { width: min(1120px, 100% - 40px); margin: 0 auto; }

/* 上の帯 */
.bar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px clamp(12px, 3vw, 40px); transition: background .4s, box-shadow .4s; }
.bar.solid { background: rgba(240,232,250,.9); box-shadow: 0 4px 18px rgba(120,105,190,.2); backdrop-filter: blur(8px); }
.bar-logo img { width: 120px; opacity: 0; transition: opacity .4s; }
.bar.solid .bar-logo img { opacity: 1; }
.bar nav { display: flex; gap: clamp(10px, 2vw, 28px); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.bar nav::-webkit-scrollbar { display: none; }
.bar nav a { text-decoration: none; font-weight: 900; font-size: 15px; color: var(--ink); text-shadow: 0 0 8px #fff, 0 0 8px #fff; padding: 6px 2px; }
.bar nav a:hover { color: var(--pink); }

/* 場面（画面いっぱい） */
.scene { position: relative; min-height: 100svh; display: grid; align-content: center; padding: 96px clamp(20px, 6vw, 96px); overflow: hidden; }
.plate { position: relative; z-index: 1; width: fit-content; max-width: 94vw; padding: clamp(18px, 3.2vw, 44px) clamp(20px, 4.4vw, 64px); margin: 20px 0; isolation: isolate; }
.plate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #d9c2a0 url(img/parchment.jpg) center / cover; border: 6px solid #3d3b3c; box-shadow: 0 0 0 2px rgba(61,59,60,.5) inset; filter: url(#rough); }
.plate::after { content: ""; position: absolute; inset: 10px -10px -12px 12px; z-index: -2; background: rgba(40,35,45,.28); filter: blur(6px); }
.plate p { margin: 0; white-space: nowrap; font-family: var(--fude); font-size: clamp(17px, 3.3vw, 46px); line-height: 1.75; letter-spacing: .1em; color: var(--sumi); }
.plate .ind { display: block; text-align: right; }
.plate.big p { font-size: clamp(21px, 4.2vw, 60px); }
.p-right { justify-self: end; } .p-left { justify-self: start; } .p-center { justify-self: center; }

/* 1 霧の農村 */
.s-village { align-content: end; padding-bottom: clamp(70px, 12vh, 140px); }
.s-village::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(111,106,102,.75) 60%, #6f6a66); pointer-events: none; }
.big-title { position: absolute; z-index: 2; top: clamp(70px, 13vh, 150px); left: 50%; width: min(78vw, 620px); margin: 0; }
.down { position: absolute; z-index: 2; left: 50%; bottom: 22px; width: 34px; height: 34px; margin-left: -17px; border-right: 5px solid #fff; border-bottom: 5px solid #fff; transform: rotate(45deg); animation: down 1.6s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
@keyframes down { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes fuwa { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* 2 化石 */
.s-fossil { background: linear-gradient(180deg, #6f6a66 0%, #5b5450 45%, #453c52 80%, #2a2340 100%); justify-items: center; }
.fossil-wrap { position: relative; width: min(100%, 980px); display: grid; }
.fossil { margin: 0 0 0 auto; width: min(100%, 640px); box-shadow: 14px 16px 0 rgba(30,26,30,.35); border: 6px solid #3d3b3c; rotate: 1deg; }
.fossil-wrap .plate { margin-top: clamp(-90px, -8vw, -40px); }

/* 3 光 */
.s-sparkle { background: #a599c9 url(img/sparkle.jpg) center top / cover no-repeat; min-height: 90svh; padding: 0; }

/* 4 すがた */
.s-reveal { background: #cdd6f4 url(img/top.jpg) center bottom / cover no-repeat; }
.pair { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 3vw, 40px); width: min(100%, 820px); }
.pair img { filter: drop-shadow(0 16px 20px rgba(90,80,150,.3)); }
.pair .gon { width: 52%; }
.pair .kon { width: 33%; }
.s-reveal .plate { margin-top: clamp(-60px, -5vw, -20px); }

/* 5 使命 */
.s-mission { background: linear-gradient(180deg, #ecddec 0%, #e8d8e9 100%); gap: clamp(10px, 4vh, 40px); }
.go { justify-self: center; margin-top: 20px; padding: 16px 44px; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 900; font-size: clamp(17px, 2vw, 22px); text-decoration: none; box-shadow: 0 8px 0 #c44b86, 0 16px 24px rgba(200,80,140,.3); transition: translate .15s, box-shadow .15s; }
.go::after { content: " ↓"; }
.go:hover { translate: 0 4px; box-shadow: 0 4px 0 #c44b86, 0 10px 18px rgba(200,80,140,.3); }

/* 調査の記録 */
.records { background: #e8d8e9 url(img/bg.jpg) center top / 100% 100% no-repeat; }
.sec { position: relative; padding: clamp(64px, 9vw, 120px) 0; scroll-margin-top: 40px; }
/* 白っぽい帯は、上下をぼかして背景に溶かす */
.sec.alt::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(255,255,255,.5); -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
.sec > .wrap { position: relative; z-index: 1; }
.sec h2 { margin: 0 auto 8px; width: min(64%, 340px); rotate: -2deg; }
.sec h2.left { margin-left: 0; }
.sec h2.text-h { width: auto; rotate: 0deg; text-align: center; font-weight: 900; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.5; }
.lead { text-align: center; margin: 0 0 36px; font-weight: 700; }
.charas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.chara { position: relative; display: grid; grid-template-columns: 42% 1fr; gap: clamp(14px, 2.4vw, 32px); align-items: center; background: var(--card); border-radius: 30px; padding: clamp(20px, 3vw, 40px); box-shadow: 0 14px 34px rgba(120,105,190,.22); }
.chara .no { position: absolute; left: 22px; top: -14px; padding: 0 14px; border-radius: 999px; background: #3d3b3c; color: #f3e6cf; font-family: var(--fude); font-size: 14px; letter-spacing: .14em; }
.chara .bob { animation: fuwa 4s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(90,80,150,.22)); max-height: 380px; width: auto; margin: 0 auto; }
.chara h3 { margin: 0; font-weight: 900; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.3; text-shadow: 2px 2px 0 #fff; }
.c-kon { color: var(--sky); } .c-gon { color: var(--salmon); }
.catch { margin: 6px 0 12px; font-weight: 700; font-size: 16px; line-height: 2; color: var(--pink); }
.chara dl { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 0 14px; font-size: 15px; line-height: 2; }
.chara dt { color: var(--soft); font-weight: 700; } .chara dd { margin: 0; font-weight: 700; }
.more { font-size: 14px; font-weight: 700; text-decoration: none; }
.two { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.side-art { margin: 0; } .side-art img { mix-blend-mode: multiply; }
.two p { margin: 0 0 14px; }
.three { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; font-size: 14px; line-height: 1.7; }
.three li { background: #fff; border-radius: 20px; padding: 16px 6px; border: 2px dashed #d8cdf3; }
.three b { display: block; font-size: 22px; font-weight: 900; }
.three li:nth-child(1) b { color: var(--pink); } .three li:nth-child(2) b { color: var(--sky); } .three li:nth-child(3) b { color: var(--salmon); }
.pic { display: block; max-width: 900px; margin: 0 auto; border-radius: 22px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 12px 30px rgba(120,105,190,.28); rotate: -1deg; }
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.box { background: var(--card); border-radius: 30px; padding: 28px 20px 34px; box-shadow: 0 14px 34px rgba(120,105,190,.18); scroll-margin-top: 80px; }
.soon { margin: 0; text-align: center; font-weight: 900; font-size: 22px; color: var(--soft); letter-spacing: .2em; }

footer { padding: 36px 20px 48px; text-align: center; font-size: 14px; line-height: 1.9; background: linear-gradient(180deg, #e1d4e9, #d9cdea); }
footer p { margin: 0 0 6px; } footer .small { font-size: 12px; color: var(--soft); }

/* ふわっと出す */
.rise { opacity: 0; translate: 0 34px; transition: opacity .9s, translate .9s cubic-bezier(.2,.8,.2,1); }
.rise.in { opacity: 1; translate: 0 0; }


@media (max-width: 800px) {
  body { font-size: 16px; }
  .bar nav a { font-size: 13px; }
  .charas, .halves { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; } .side-art { max-width: 240px; margin: 0 auto; }
  .sec h2.left { margin-left: auto; }
  .chara { grid-template-columns: 38% 1fr; border-radius: 24px; }
  .chara dl { font-size: 13px; } .catch { font-size: 14px; }
  .fossil { margin: 0 auto; }
  .pair { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; } .rise { opacity: 1; translate: 0 0; transition: none; } }

/* お問い合わせ */
.c-text { margin: 6px 0 16px; text-align: center; font-size: 15px; line-height: 2.1; }
.c-btn { margin: 0; text-align: center; }
.mail { display: inline-block; padding: 12px 36px; border-radius: 999px; background: var(--sky); color: #fff; font-weight: 900; text-decoration: none; box-shadow: 0 6px 0 #3a9cc4; transition: translate .15s, box-shadow .15s; }
.mail:hover { translate: 0 3px; box-shadow: 0 3px 0 #3a9cc4; }
.c-mail { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--soft); }

/* ===== つなぎ目のぼかし（場面の上下を、となりの場面の色へ溶かす） ===== */
.scene::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26%; z-index: 0; pointer-events: none; }
.s-sparkle::before { background: linear-gradient(180deg, #3d3566, rgba(61,53,102,0)); height: 45%; }
.s-sparkle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(212,224,254,0), #d4e0fe); pointer-events: none; }
.s-reveal::before { background: linear-gradient(180deg, #d4e0fe, rgba(212,224,254,0)); height: 22%; }
.s-reveal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(180deg, rgba(236,221,236,0), #ecddec); pointer-events: none; z-index: 0; }
.s-reveal .pair, .s-reveal .plate { z-index: 2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ===== 3 研究室：うす暗がりに、ふたりの影 ===== */
.s-lab { background: linear-gradient(180deg, #2a2340 0%, #231d3a 45%, #2f2852 78%, #3d3566 100%); align-content: start; padding-top: clamp(84px, 11vh, 130px); min-height: 110svh; }
.lab-art { position: absolute; inset: 0; z-index: 0; }
.lab-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 100%; }
.lab-lines { opacity: 0; filter: drop-shadow(0 0 6px rgba(190,170,255,.8)); transition: opacity 2.4s .3s; }
.lab-art.in .lab-lines { opacity: .34; animation: flicker 7s linear 2.8s infinite; }
.lab-sil { opacity: 0; translate: -3% 0; filter: drop-shadow(0 0 18px rgba(170,150,255,.55)) drop-shadow(0 0 2px rgba(220,210,255,.9)); transition: opacity 2s 1s, translate 2.6s 1s cubic-bezier(.2,.8,.2,1); }
.lab-art.in .lab-sil { opacity: 1; translate: 0 0; animation: breathe 5s ease-in-out 3.6s infinite; }
.lab-glow { position: absolute; left: 4%; top: 22%; width: 62%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(170,150,255,.5), rgba(120,110,230,.18) 55%, transparent); opacity: 0; transition: opacity 2.4s .6s; animation: glow 5s ease-in-out infinite; }
.lab-art.in .lab-glow { opacity: 1; }
.lab-scan { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(190,175,255,.16), transparent); animation: scan 7s linear infinite; }
.lab-art.rise { opacity: 1; translate: 0 0; }
@keyframes flicker { 0%, 100% { opacity: .34; } 46% { opacity: .34; } 48% { opacity: .12; } 50% { opacity: .4; } 52% { opacity: .2; } 54% { opacity: .34; } }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.012; } }
@keyframes glow { 0%, 100% { scale: 1; filter: brightness(1); } 50% { scale: 1.08; filter: brightness(1.35); } }
@keyframes scan { from { translate: 0 -30%; } to { translate: 0 520%; } }

/* ===== 霧・ちり・星・雲 ===== */
.mist { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mist i { position: absolute; left: -30%; width: 160%; height: 46%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(240,225,245,.25) 55%, transparent); filter: blur(10px); animation: drift 38s ease-in-out infinite alternate; }
.mist i:nth-child(1) { top: 14%; } .mist i:nth-child(2) { top: 36%; animation-duration: 52s; animation-direction: alternate-reverse; opacity: .8; } .mist i:nth-child(3) { top: 56%; animation-duration: 44s; opacity: .55; }
@keyframes drift { from { translate: -12% 0; } to { translate: 12% 0; } }
.dust, .stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mote { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(214,196,170,.7); scale: var(--s); animation: mote 9s linear var(--d) infinite; }
@keyframes mote { 0% { translate: 0 0; opacity: 0; } 15% { opacity: .8; } 100% { translate: 40px -160px; opacity: 0; } }
.star { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(255,255,255,.8); scale: var(--s); animation: twinkle 3.2s ease-in-out var(--d) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.3); } }
.flash { position: absolute; left: 50%; top: 50%; width: min(90vw, 900px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255,255,255,.55) 35%, transparent 70%); }

.clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.clouds i { position: absolute; width: clamp(160px, 22vw, 340px); aspect-ratio: 5 / 2; opacity: .8; animation: cloud 60s linear infinite; filter: blur(2px);
  background: radial-gradient(closest-side, #fff 60%, transparent) 8% 70% / 46% 62% no-repeat, radial-gradient(closest-side, #fff 60%, transparent) 42% 30% / 52% 80% no-repeat, radial-gradient(closest-side, #fff 60%, transparent) 86% 68% / 44% 60% no-repeat, radial-gradient(closest-side, #fff 60%, transparent) 55% 85% / 70% 50% no-repeat; }
.clouds i:nth-child(1) { top: 10%; } .clouds i:nth-child(2) { top: 26%; animation-duration: 84s; animation-delay: -30s; scale: .7; } .clouds i:nth-child(3) { top: 5%; animation-duration: 72s; animation-delay: -52s; scale: .55; }
@keyframes cloud { from { left: -20%; } to { left: 110%; } }

/* ===== 化石：ほり出す ===== */
.fossil.rise { clip-path: inset(0 0 100% 0); opacity: 1; transition: clip-path 1.8s cubic-bezier(.3,.7,.2,1), translate .9s; }
.fossil.rise.in { clip-path: inset(0 0 0 0); animation: rumble .5s linear 2; }
@keyframes rumble { 0%, 100% { translate: 0 0; } 25% { translate: -3px 1px; } 50% { translate: 3px -1px; } 75% { translate: -2px -1px; } }

/* ===== 札：文字が1つずつ浮かぶ ===== */
.plate .ch { display: inline-block; opacity: 0; translate: 0 .3em; filter: blur(4px); transition: opacity .5s, translate .5s, filter .5s; transition-delay: calc(.5s + var(--n) * .06s); white-space: pre; }
.plate.in .ch { opacity: 1; translate: 0 0; filter: none; }
.plate.rise { rotate: -1.5deg; transition: opacity .9s, translate .9s cubic-bezier(.2,.8,.2,1), rotate 1.2s cubic-bezier(.2,1.4,.4,1); }
.plate.rise.in { rotate: 0deg; }
.p-right.rise { rotate: 1.5deg; }

/* ===== ふたりの登場と、さわったとき ===== */

@keyframes pop { from { scale: 0; rotate: -12deg; } to { scale: 1; rotate: 0deg; } }
.hop { animation: hop .6s cubic-bezier(.3,1.6,.5,1) !important; cursor: pointer; }
@keyframes hop { 0%, 100% { translate: 0 0; scale: 1; } 30% { translate: 0 -34px; scale: .94 1.08; } 60% { translate: 0 0; scale: 1.08 .92; } }
.chara .bob, .pair img { cursor: pointer; }

/* ===== 記録のカードまわり ===== */
.chara { transition: translate .3s, box-shadow .3s, rotate .3s; }
.chara:hover { translate: 0 -8px; rotate: -.6deg; box-shadow: 0 24px 44px rgba(120,105,190,.3); }
.chara:nth-child(2).rise { transition-delay: .2s; }
.sec h2.rise { scale: .6; transition: opacity .7s, translate .7s, scale .8s cubic-bezier(.2,1.6,.4,1); } .sec h2.rise.in { scale: 1; }
.sec h2 img { animation: wob 5s ease-in-out infinite; }
@keyframes wob { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
.three li.rise { scale: .7; transition: opacity .6s, translate .6s, scale .7s cubic-bezier(.2,1.6,.4,1); } .three li.rise.in { scale: 1; }
.three li:nth-child(2).rise { transition-delay: .15s; } .three li:nth-child(3).rise { transition-delay: .3s; }
.pic { transition: rotate .4s, scale .4s; } .pic:hover { rotate: 0deg; scale: 1.02; }
.side-art img { animation: fuwa 6s ease-in-out infinite; }
.bar nav a { transition: translate .2s, color .2s; } .bar nav a:hover { translate: 0 -3px; }
.big-title { translate: -50% var(--py, 0px); transform: none; }
.big-title img { animation: fuwa 5s ease-in-out infinite; }
.go { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }

/* ===================== 2026-11-12 第3版：順番の入れ替え・奥行き・キュポン・揺れの除去 ===================== */
/* 揺れの除去：化石のがたがた・影の伸び縮み・札の回転をやめ、札は1枚の層にして縁の手描き風がぶれないようにする */
.fossil.rise.in { animation: none; }
.lab-art.in .lab-sil { animation: none; }
.lab-glow { animation: glowfade 5s ease-in-out infinite; }
@keyframes glowfade { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.lab-art.in .lab-glow { opacity: 1; }
.plate { will-change: transform, opacity; }
.plate.rise, .p-right.rise { rotate: 0deg; transition: opacity .9s, translate .9s cubic-bezier(.2,.8,.2,1); }
.plate .ch { filter: none; transition: opacity .5s, translate .5s; transition-delay: calc(.4s + var(--n) * .055s); }
.go { animation: none; }
.big-title { translate: -50% 0; }

/* 背景は中の層に持たせる（スクロールで寄ったり引いたりできるように） */
.s-village { background: #cfc4d6; }
.vbg { position: absolute; inset: -6% 0 0 0; background: url(img/village.jpg) center bottom / cover no-repeat; transform-origin: 50% 78%; }
.s-village .mist, .s-village::after { z-index: 1; }
.s-village .plate, .s-village .down { z-index: 3; }
.s-sparkle { background: #a599c9; min-height: 150svh; padding: 96px clamp(20px, 6vw, 96px); align-content: center; gap: clamp(20px, 8vh, 90px); }
.sbg { position: absolute; inset: 0; background: url(img/sparkle.jpg) center top / cover no-repeat; transform-origin: 50% 50%; }
.s-sparkle::before, .s-sparkle::after { z-index: 1; }
.s-sparkle .stars { z-index: 1; } .s-sparkle .flash { z-index: 1; opacity: .85; scale: .5; } .s-sparkle .plate { z-index: 3; }

/* 地面の下へ：地層の帯 */
.strata { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.strata i { position: absolute; left: -5%; right: -5%; height: 34%; opacity: .5;
  background: repeating-linear-gradient(176deg, transparent 0 38px, rgba(30,24,22,.28) 38px 41px, transparent 41px 96px, rgba(210,190,160,.14) 96px 99px); }
.strata i:nth-child(1) { top: 2%; } .strata i:nth-child(2) { top: 36%; opacity: .38; background-size: 140% 100%; } .strata i:nth-child(3) { top: 68%; opacity: .3; }
.fossil { box-shadow: 14px 16px 0 rgba(20,16,20,.4), 0 30px 60px rgba(0,0,0,.45); }

/* 5 すがた：止まって、キュポン */
.pin { position: relative; height: 230svh; background: #d4e0fe; }
.pin-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.s-reveal { align-content: end; justify-items: center; padding-bottom: clamp(24px, 6vh, 70px); }
.curtain { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.curtain i { position: absolute; top: -10%; bottom: -10%; width: 64%; transition: translate 1.1s cubic-bezier(.6,0,.2,1), opacity 1.1s;
  background: radial-gradient(closest-side, #fff 55%, rgba(255,255,255,0)) 30% 12% / 70% 34% no-repeat, radial-gradient(closest-side, #fff 55%, rgba(255,255,255,0)) 60% 34% / 90% 40% no-repeat, radial-gradient(closest-side, #fff 55%, rgba(255,255,255,0)) 35% 60% / 80% 40% no-repeat, radial-gradient(closest-side, #fff 55%, rgba(255,255,255,0)) 60% 88% / 100% 36% no-repeat; }
.curtain i:nth-child(1) { left: -6%; } .curtain i:nth-child(2) { right: -6%; scale: -1 1; }
.pop .curtain i:nth-child(1) { translate: -105% 0; opacity: 0; } .pop .curtain i:nth-child(2) { translate: 105% 0; opacity: 0; }
.pin-stage .pair { position: relative; z-index: 2; }
.pin-stage .pair img { scale: 0; transform-origin: 50% 100%; }
.pop .pair .gon { animation: kyupon .9s cubic-bezier(.3,1.2,.4,1) .55s both, fuwa 4.2s ease-in-out 1.6s infinite; }
.pop .pair .kon { animation: kyupon .9s cubic-bezier(.3,1.2,.4,1) .85s both, fuwa 3.6s ease-in-out 1.9s infinite; }
@keyframes kyupon { 0% { scale: 0 0; } 35% { scale: .72 1.38; } 55% { scale: 1.2 .82; } 72% { scale: .94 1.08; } 86% { scale: 1.03 .98; } 100% { scale: 1 1; } }
.ring { position: absolute; left: 50%; bottom: 20%; width: 40%; aspect-ratio: 1; margin-left: -20%; border-radius: 50%; border: 8px solid #fff; opacity: 0; pointer-events: none; }
.pop .ring { animation: ring .9s ease-out .6s both; } .pop .ring.r2 { animation-delay: .95s; border-color: #ffe9a8; }
@keyframes ring { 0% { scale: .2; opacity: .95; } 100% { scale: 2.6; opacity: 0; } }
.pin-stage .go { position: relative; z-index: 4; margin-top: clamp(10px, 3vh, 30px); opacity: 0; translate: 0 20px; transition: opacity .6s 1.9s, translate .6s 1.9s, box-shadow .15s; }
.pop .go { opacity: 1; translate: 0 0; }
.pin-stage .go:hover { translate: 0 4px; }
.pin + .records { margin-top: -1px; }
.pin-stage::after { z-index: 1; }

/* ===== スクロールで動く奥行き（対応ブラウザだけ。動きを減らす設定では出さない） ===== */
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  /* 農村：霧の奥へ進む。題字は先に上へ抜け、札はゆっくりついてくる */
  .vbg { animation: v-zoom linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes v-zoom { to { scale: 1.45; translate: 0 6%; } }
  .big-title { animation: v-title linear both; animation-timeline: view(); animation-range: exit -20% exit 90%; }
  @keyframes v-title { to { translate: -50% -180px; opacity: 0; scale: 1.25; } }
  .s-village .mist { animation: v-mist linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes v-mist { to { scale: 1.8; opacity: 0; } }
  .s-village .plate { animation: par-up linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes par-up { from { transform: translateY(70px); } to { transform: translateY(-70px); } }
  /* 化石：地層が速さを変えて流れ、絵は奥から手前へ */
  .strata i:nth-child(1) { animation: st1 linear both; animation-timeline: view(); }
  .strata i:nth-child(2) { animation: st2 linear both; animation-timeline: view(); }
  .strata i:nth-child(3) { animation: st3 linear both; animation-timeline: view(); }
  @keyframes st1 { from { transform: translateY(40%); } to { transform: translateY(-40%); } }
  @keyframes st2 { from { transform: translateY(90%); } to { transform: translateY(-90%); } }
  @keyframes st3 { from { transform: translateY(160%); } to { transform: translateY(-160%); } }
  .fossil img { animation: f-push linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes f-push { from { scale: 1.18; } to { scale: 1; } }
  .fossil { overflow: hidden; animation: f-tilt linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes f-tilt { from { rotate: 4deg; transform: translateY(60px); } to { rotate: -1.5deg; transform: translateY(-40px); } }
  .fossil-wrap .plate { animation: par-up linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  /* 研究室：床と機材は奥、ふたりの影は手前。近づいていく */
  .lab-lines { animation: l-back linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; transition: opacity 2.4s .3s; }
  @keyframes l-back { from { transform: scale(1.22) translateY(-3%); } to { transform: scale(1) translateY(2%); } }
  .lab-art .lab-sil { animation: l-front linear both !important; animation-timeline: view() !important; animation-range: cover 0% cover 100% !important; }
  @keyframes l-front { from { transform: scale(.9) translate(-2%, 4%); } to { transform: scale(1.12) translate(2%, -2%); } }
  .lab-glow { animation: l-glow linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes l-glow { from { scale: .6; opacity: .3; } to { scale: 1.35; opacity: 1; } }
  .s-lab .plate { animation: par-up linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  /* 光：星が後ろへ流れ、光が広がって画面を白くする */
  .sbg { animation: s-zoom linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes s-zoom { from { scale: 1; } to { scale: 1.7; } }
  .s-sparkle .stars { animation: s-stars linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes s-stars { from { scale: .7; } to { scale: 2.6; } }
  .s-sparkle .flash { animation: s-flash linear both; animation-timeline: view(); animation-range: cover 20% cover 95%; }
  @keyframes s-flash { from { scale: .15; opacity: .2; } to { scale: 3.4; opacity: 1; } }
  .s-sparkle .plate:nth-of-type(1) { animation: par-up linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  /* 記録：カードの絵が少し遅れてついてくる */
  .chara .bob { animation-name: fuwa; }
  .pic img { animation: f-push linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } .pic { overflow: hidden; }
} }
@media (prefers-reduced-motion: reduce) { .pin { height: auto; } .pin-stage { position: relative; } .pin-stage .pair img { scale: 1; } .curtain { display: none; } .pin-stage .go { opacity: 1; translate: 0 0; } }

/* 研究室：影を少し左へ寄せて、札と重ならないようにする */
.lab-art { inset: 0 0 0 -14%; }
/* ふたりの登場：画面の高さに収める（頭が切れないように） */
.pin-stage .pair { width: auto; max-width: 100%; height: min(60svh, 95vw); align-items: flex-end; }
.pin-stage .pair .gon { width: auto; height: 100%; }
.pin-stage .pair .kon { width: auto; height: 64%; }

/* ===================== 2026-11-12 第4版：軽く・吹き出し・題字・花火 ===================== */
/* --- 軽くする：重い効果を外す。画面に出ていない場面の動きは止める --- */
.scene:not(.live) *, .sec:not(.live) *, .pin:not(.live) * { animation-play-state: paused !important; }
.bar.solid { backdrop-filter: none; background: rgba(240,232,250,.96); }
.mist i { filter: none; background: radial-gradient(closest-side, rgba(255,255,255,.42), rgba(240,225,245,.16) 55%, transparent 80%); }
.star { box-shadow: none; width: 10px; height: 10px; background: radial-gradient(closest-side, #fff 30%, rgba(255,255,255,.5) 55%, transparent); }
.lab-lines, .lab-sil { filter: none !important; }
.lab-scan { display: none; }
.pair img, .pin-stage .pair img { filter: none; }
.chara .bob, .side-art img, .sec h2 img { will-change: auto; }
.vbg, .sbg, .lab-art img, .s-sparkle .stars, .s-sparkle .flash { will-change: transform; }
.clouds i { filter: none; }
.flash { background: radial-gradient(closest-side, #fff, rgba(255,255,255,.5) 40%, transparent 72%); }

/* --- 吹き出し：かわいく、はっきり読める --- */
.plate { padding: clamp(18px, 2.6vw, 34px) clamp(24px, 4vw, 54px); margin: 20px 0; border-radius: 30px; background: #fffaf2; border: 5px solid #4a3f6b; box-shadow: 8px 10px 0 #cbb6f0; }
.plate::before { filter: none; inset: auto; left: 44px; bottom: -22px; width: 30px; height: 30px; z-index: 0; background: #fffaf2; border: 0; border-right: 5px solid #4a3f6b; border-bottom: 5px solid #4a3f6b; box-shadow: none; transform: rotate(45deg) skew(8deg, 8deg); border-bottom-right-radius: 8px; }
.plate::after { inset: auto; right: 16px; top: 12px; width: 14px; height: 14px; z-index: 0; border-radius: 50%; background: #ffd0e4; box-shadow: -24px 4px 0 -3px #c9eafc; filter: none; }
.p-right::before { left: auto; right: 44px; }
.p-center::before { left: 50%; margin-left: -15px; }
.plate p { position: relative; z-index: 1; font-family: var(--font); font-weight: 900; font-size: clamp(18px, 3vw, 40px); line-height: 1.7; letter-spacing: .08em; color: #3a2f5b; }
.plate.big p { font-size: clamp(21px, 3.7vw, 52px); }
.s-lab .plate { background: #fffaf2; }
.chara .no { font-family: var(--font); font-weight: 900; background: #4a3f6b; color: #fff; }

/* --- 1 農村：景色は止まったまま。題字のあと、間をあけて吹き出し --- */
.s-village { display: block; align-content: normal; min-height: 0; height: 215svh; padding: 0; overflow: clip; }
.vstick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.vstick .vbg { inset: -4% 0 0 0; }
.s-village::after { z-index: 1; height: 22svh; }
.big-title { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 100svh; width: auto; margin: 0; translate: none; display: grid; place-content: center; justify-items: center; gap: 14px; pointer-events: none; }
.s-village .down { top: calc(100svh - 64px); bottom: auto; }
.s-village .plate { position: absolute; z-index: 3; right: clamp(20px, 6vw, 96px); top: 142svh; margin: 0; }

/* --- 題字：テクノ風の出し方（枠の角 → 格子 → 色ずれしながら刻んで表示 → 走査線 → 英字） --- */
.tt { position: relative; display: block; width: min(78vw, 620px); aspect-ratio: 519 / 240; }
.tt img { position: relative; z-index: 2; width: 100%; height: 100%; clip-path: inset(0 100% 0 0); }
.go-tt .tt img { animation: tt-in .7s steps(9) .55s both, fuwa 5s ease-in-out 2.4s infinite; }
@keyframes tt-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tt-ghost { position: absolute; inset: 0; z-index: 1; background: url(img/title.png) center / contain no-repeat; opacity: 0; mix-blend-mode: screen; }
.tt-ghost.ga { filter: hue-rotate(140deg) saturate(3); } .tt-ghost.gb { filter: hue-rotate(-60deg) saturate(3); }
.go-tt .ga { animation: gh-a 1.25s steps(6) .55s both, blip-a 7s steps(1) 4s infinite; }
.go-tt .gb { animation: gh-b 1.25s steps(6) .55s both, blip-b 7s steps(1) 4s infinite; }
@keyframes gh-a { 0% { opacity: 0; transform: translate(-46px, 0); } 20% { opacity: .9; } 70% { opacity: .7; transform: translate(-6px, 2px); } 100% { opacity: 0; transform: none; } }
@keyframes gh-b { 0% { opacity: 0; transform: translate(46px, 0); } 20% { opacity: .9; } 70% { opacity: .7; transform: translate(6px, -2px); } 100% { opacity: 0; transform: none; } }
@keyframes blip-a { 0%, 3%, 100% { opacity: 0; transform: none; } 1% { opacity: .7; transform: translate(-9px, 0); } 2% { opacity: .5; transform: translate(5px, 2px); } }
@keyframes blip-b { 0%, 3%, 100% { opacity: 0; transform: none; } 1% { opacity: .7; transform: translate(9px, 0); } 2% { opacity: .5; transform: translate(-5px, -2px); } }
.tt-grid { position: absolute; inset: -8% -5%; z-index: 0; opacity: 0;
  background: linear-gradient(90deg, rgba(74,63,107,.5) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(rgba(74,63,107,.5) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
.go-tt .tt-grid { animation: grid-in 1.5s steps(5) .2s both; }
@keyframes grid-in { 0% { opacity: 0; } 20% { opacity: .9; } 30% { opacity: .2; } 45% { opacity: .8; } 100% { opacity: 0; } }
.hud { position: absolute; z-index: 3; width: 34px; height: 34px; border: 0 solid #4a3f6b; opacity: 0; }
.hud.c1 { left: -4%; top: -10%; border-left-width: 4px; border-top-width: 4px; } .hud.c2 { right: -4%; top: -10%; border-right-width: 4px; border-top-width: 4px; }
.hud.c3 { left: -4%; bottom: -10%; border-left-width: 4px; border-bottom-width: 4px; } .hud.c4 { right: -4%; bottom: -10%; border-right-width: 4px; border-bottom-width: 4px; }
.go-tt .hud { animation: hud-in .5s steps(4) both; } .go-tt .c2 { animation-delay: .08s; } .go-tt .c3 { animation-delay: .16s; } .go-tt .c4 { animation-delay: .24s; }
@keyframes hud-in { 0% { opacity: 0; scale: 2.2; } 50% { opacity: 1; } 75% { opacity: .2; } 100% { opacity: .85; scale: 1; } }
.tt-scan { position: absolute; z-index: 4; left: -6%; right: -6%; top: 0; height: 5px; background: linear-gradient(90deg, transparent, #7fd4f5 20%, #fff 50%, #ff8fc2 80%, transparent); opacity: 0; }
.go-tt .tt-scan { animation: tt-scan .9s linear .5s both; }
@keyframes tt-scan { 0% { top: -6%; opacity: 1; } 90% { opacity: 1; } 100% { top: 106%; opacity: 0; } }
.tt-sub { display: flex; align-items: center; gap: 6px; font-family: "Share Tech Mono", ui-monospace, Menlo, monospace; font-size: clamp(13px, 1.5vw, 18px); letter-spacing: .5em; color: #4a3f6b; text-shadow: 0 0 8px #fff, 0 0 8px #fff; }
.tt-sub b { font-weight: 400; display: inline-block; overflow: hidden; white-space: nowrap; width: 0; }
.go-tt .tt-sub b { animation: type 1s steps(12) 1.35s both; }
@keyframes type { from { width: 0; } to { width: 18.6em; } }
.tt-sub i { width: .6em; height: 1.1em; background: #e86aa6; opacity: 0; }
.go-tt .tt-sub i { animation: cur .8s steps(1) 1.3s infinite; }
@keyframes cur { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* --- 2 化石：枠をやめ、ふちをぼかした絵を地面になじませる --- */
.fossil { border: 0; box-shadow: none; rotate: 0deg; overflow: visible; width: min(100%, 720px); }
.fossil.rise { clip-path: none; opacity: 0; translate: 0 30px; transition: opacity 1.6s, translate 1.6s; } .fossil.rise.in { opacity: 1; translate: 0 0; }
.fossil-wrap .plate { margin-top: clamp(-70px, -5vw, -20px); }

/* --- 5 登場：花火。出きったら動きを固定（出たり引っこんだりしない） --- */
.fw-box { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fw { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--c); opacity: 0; animation: fw 1.15s cubic-bezier(.15,.7,.3,1) both; }
.fw.st { border-radius: 0; width: 20px; height: 20px; margin: -10px; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
@keyframes fw { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(1.15); } }
.pop .pair .gon { animation: kyupon .9s cubic-bezier(.3,1.2,.4,1) .55s both; }
.pop .pair .kon { animation: kyupon .9s cubic-bezier(.3,1.2,.4,1) .85s both; }
.done .pair img { scale: 1 !important; animation: none !important; }
.done .pair .gon { animation: fuwa 4.2s ease-in-out infinite !important; } .done .pair .kon { animation: fuwa 3.6s ease-in-out -1s infinite !important; }
.ring { display: none; }

@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  /* 農村：景色が止まったまま、進むほど霧の奥へ */
  .s-village { view-timeline-name: --vil; }
  .vbg { animation: v-zoom linear both; animation-timeline: --vil; animation-range: contain 0% exit 100%; }
  .s-village .mist { animation: v-mist linear both; animation-timeline: --vil; animation-range: contain 40% exit 100%; }
  .big-title { animation: v-title2 linear both; animation-timeline: --vil; animation-range: contain 4% contain 38%; }
  @keyframes v-title2 { to { transform: translateY(-120px) scale(1.12); opacity: 0; } }
  .s-village .plate { animation: none; }
  .fossil { animation: f-tilt2 linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes f-tilt2 { from { transform: translateY(70px) scale(.94); } to { transform: translateY(-50px) scale(1.04); } }
  .fossil img { animation: none; }
} }
@media (prefers-reduced-motion: reduce) { .tt img { clip-path: none; } .tt-sub b { width: auto; } .s-village { height: auto; min-height: 100svh; } .s-village .plate { position: relative; top: auto; right: auto; margin: 40px 20px 60px auto; } .vstick { position: absolute; inset: 0; height: auto; } .big-title { position: relative; } }

/* ===================== 2026-11-12 第5版 ===================== */
/* --- 吹き出し：絵巻物の雰囲気を少し戻す（明るい羊皮紙・墨の枠・両端に巻いた紙の影）。しっぽはなし --- */
.plate { border-radius: 6px 9px 7px 10px; border: 4px solid #3d3b3c; background: #f3e4c6 url(img/parchment_l.jpg) center / cover; box-shadow: 7px 9px 0 rgba(45,38,50,.3); padding: clamp(18px, 2.6vw, 34px) clamp(34px, 5vw, 70px); }
.plate::before { inset: 5px; left: 5px; right: 5px; bottom: 5px; width: auto; height: auto; margin: 0; transform: none; border: 1.5px solid rgba(61,59,60,.45); border-radius: 3px 5px 4px 6px; background: none; }
.p-right::before, .p-center::before { left: 5px; right: 5px; margin: 0; }
.plate::after { inset: 0; width: auto; height: auto; border-radius: 0; box-shadow: none;
  background: linear-gradient(90deg, rgba(92,66,38,.42) 0, rgba(92,66,38,.12) 14px, transparent 30px, transparent calc(100% - 30px), rgba(92,66,38,.12) calc(100% - 14px), rgba(92,66,38,.42) 100%); }
.plate p { font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 800; color: #2a2226; letter-spacing: .1em; text-shadow: 0 0 6px rgba(255,248,230,.9); }
.s-lab .plate { background: #f3e4c6 url(img/parchment_l.jpg) center / cover; }

/* --- 化石：白ふちの写真のように。少し傾ける --- */
.fossil { width: min(100%, 640px); border: 12px solid #fbf8f1; border-bottom-width: 16px; box-shadow: 10px 14px 0 rgba(20,16,20,.32), 0 24px 50px rgba(0,0,0,.4); rotate: 1.2deg; background: #fbf8f1; overflow: hidden; }

/* --- 英字を題字のまんなかに --- */
.tt-sub { position: relative; display: block; padding-left: .5em; }
.tt-sub b { display: block; width: auto; overflow: visible; clip-path: inset(0 100% 0 0); }
.go-tt .tt-sub b { animation: type2 1s steps(12) 1.35s both; }
@keyframes type2 { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tt-sub i { position: absolute; left: 100%; top: 50%; margin-top: -.55em; }

/* --- いちばん最初は虹色の空。スクロールすると空から霧の農村へおりていく --- */
.vsky { position: absolute; inset: 0; z-index: 2; background: #d4e0fe url(img/top.jpg) center 38% / cover no-repeat; transition: opacity 1.2s, translate 1.4s; }
/* 空の下の端は透明に溶かして、農村との境目に線が出ないようにする */
.vsky { inset: 0 0 -35% 0; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
.past-sky .vsky { opacity: 0; translate: 0 -30%; }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .vsky, .past-sky .vsky { transition: none; opacity: 1; translate: none; animation: sky-up linear both; animation-timeline: --vil; animation-range: contain 10% contain 46%; }
  @keyframes sky-up { to { transform: translateY(-70%) scale(1.15); opacity: 0; } }
  .vbg { animation: v-down linear both, v-zoom linear both; animation-timeline: --vil, --vil; animation-range: contain 10% contain 46%, contain 55% exit 100%; }
  @keyframes v-down { from { transform: translateY(18%); } to { transform: none; } }
  .big-title { animation-range: contain 6% contain 34%; }
} }
@media (prefers-reduced-motion: reduce) { .vsky { display: none; } }

/* ===================== 2026-11-12 第7版：縦スクロール漫画の作法にそろえる（語りは全部、縦書きの巻物） ===================== */
:root { --f-katari: "Zen Antique", "Hiragino Mincho ProN", "Yu Mincho", serif;   /* 語り（ナレーション） */
        --f-kime: "Potta One", "Zen Maru Gothic", sans-serif;                     /* 決めの一言 */
        --f-memo: "Klee One", "Zen Maru Gothic", sans-serif; }                    /* 調査メモ風の小さな文字 */
/* 巻物：縦書き。上の端だけ見えていて、するすると下へ開く */
.plate { writing-mode: vertical-rl; width: auto; max-width: none; max-height: 86svh; margin: 0; padding: clamp(26px, 4.6svh, 52px) clamp(18px, 2.6vw, 34px); border-radius: 4px;
  border: 4px solid #3d3b3c; background: #f3e4c6 url(img/parchment_l.jpg) center / cover; box-shadow: 8px 10px 0 rgba(45,38,50,.3); }
.plate::before { inset: 5px; border: 1.5px solid rgba(61,59,60,.45); border-radius: 2px; background: none; width: auto; height: auto; margin: 0; transform: none; }
.plate::after { inset: 0; background: linear-gradient(180deg, rgba(92,66,38,.5) 0, rgba(92,66,38,.14) 16px, transparent 34px, transparent calc(100% - 34px), rgba(92,66,38,.14) calc(100% - 16px), rgba(92,66,38,.5) 100%); }
.plate p { white-space: nowrap; font-family: var(--f-katari); font-weight: 400; font-size: clamp(20px, 4.2svh, 44px); line-height: 1.95; letter-spacing: .14em; color: #2a2226; text-shadow: 0 0 6px rgba(255,248,230,.9); -webkit-text-stroke: 0; }
.plate .ind { display: inline; text-align: start; padding-top: 2.2em; }
.plate.rise, .p-right.rise { opacity: 1; translate: 0 0; rotate: 0deg; clip-path: inset(0 0 calc(100% - 26px) 0); transition: clip-path 1.25s cubic-bezier(.5,0,.2,1); }
.plate.rise.in { clip-path: inset(0 0 0 0); }
.plate .ch { translate: 0 0; transition: opacity .45s; transition-delay: calc(.45s + var(--n) * .055s); }
/* 置き場所：絵の右わきに立てる（漫画のナレーションの位置） */
.s-village .plate { position: absolute; right: clamp(22px, 9vw, 150px); top: 132svh; }
.fossil-wrap { display: block; width: min(100%, 900px); }
.fossil { margin: 0 auto 0 0; width: min(78%, 620px); }
.fossil-wrap .plate { position: absolute; right: 0; top: -9%; margin: 0; z-index: 3; }
.s-lab { align-content: start; }
.s-lab .plate { position: absolute; right: clamp(22px, 9vw, 150px); top: clamp(96px, 16svh, 170px); }
/* 決めの一言：ひとまわり大きく、筆の太い書体、白ふち */
.s-sparkle { justify-items: center; align-content: center; }
.telop { position: relative; padding: clamp(30px, 5.4svh, 64px) clamp(24px, 3.6vw, 50px); }
.telop p { font-family: var(--f-kime); font-size: clamp(24px, 5.6svh, 62px); line-height: 1.85; letter-spacing: .1em; color: #3a2f5b; -webkit-text-stroke: .2em #fff; paint-order: stroke fill; text-shadow: none; }
.telop .ch { transition: opacity .3s, scale .5s cubic-bezier(.2,1.8,.4,1); scale: .4; transition-delay: calc(.6s + var(--n) * .07s); }
.telop.in .ch { scale: 1; }
/* 調査メモ風の小さな文字 */
.lead, .chara .no, .tt-sub + *, .sp-note { font-family: var(--f-memo); }
.chara .no { font-weight: 600; letter-spacing: .16em; }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .fossil-wrap .plate, .s-lab .plate, .s-sparkle .plate:nth-of-type(1) { animation: none; }
} }
@media (max-width: 800px) {
  .fossil { width: 80%; }
  .fossil-wrap .plate { right: -6px; top: -6%; }
  .s-village .plate, .s-lab .plate { right: 16px; }
  .plate p { font-size: clamp(18px, 3.6svh, 34px); }
  .telop p { font-size: clamp(22px, 4.8svh, 48px); }
}
@media (prefers-reduced-motion: reduce) { .plate.rise { clip-path: none; } .s-village .plate { position: relative; top: auto; right: auto; margin: 40px 20px 60px auto; } }

/* ===================== 2026-11-12 第8版：巻物をまんなか寄りに。農村のあと間をあけて、化石の写真と巻物が同時に出る ===================== */
.plate .dash { display: inline-block; text-align: center; letter-spacing: 0; margin: .12em 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.s-village { height: 250svh; }
.s-village .plate { left: 0; right: 0; width: fit-content; margin-left: auto; margin-right: auto; top: 128svh; }
.s-fossil { padding-top: clamp(140px, 30svh, 320px); }
.fossil-wrap { width: min(100%, 760px); margin: 0 auto; }
.fossil { width: min(76%, 560px); }
.fossil-wrap .plate { right: 2%; top: -7%; }
.s-lab .plate { right: clamp(22px, 24vw, 380px); }
@media (max-width: 800px) { .s-lab .plate { right: 16px; } .fossil-wrap .plate { right: -4px; } }

/* ===================== 2026-11-12 第9版：決めの一言も語りと同じ書体に。巻物の文字は全部、白ふち ===================== */
.plate p, .telop p { font-family: var(--f-katari); -webkit-text-stroke: .2em #fff; paint-order: stroke fill; text-shadow: none; color: #2a2226; }
.plate .dash { -webkit-text-stroke: .2em #fff; paint-order: stroke fill; }

/* ===================== 2026-11-12 第10版：くすみを取って鮮やかに（絵を鮮やかめに書き出し直し、つなぎの色も彩度を上げる） ===================== */
.s-village { background: #f7ddf8; }
.s-village::after { background: linear-gradient(180deg, transparent, rgba(124,104,62,.7) 60%, #7c683e); }
.s-fossil { background: linear-gradient(180deg, #7c683e 0%, #6a4a34 40%, #55346a 78%, #2c2270 100%); }
.s-lab { background: linear-gradient(180deg, #2c2270 0%, #281d66 42%, #3b2fa0 78%, #5546c8 100%); }
.s-sparkle { background: #a899da; }
.s-sparkle::before { background: linear-gradient(180deg, #5546c8, rgba(85,70,200,0)); }
.s-sparkle::after { background: linear-gradient(180deg, #d0e0ff00, #d0e0ff); }
.pin { background: #d0e0ff; }
.s-reveal { background-color: #d0e0ff; }
.s-reveal::before { background: linear-gradient(180deg, #d0e0ff, #d0e0ff00); }
.s-reveal::after { background: linear-gradient(180deg, #eed9ef00, #eed9ef); }
.vsky { background-color: #d0e0ff; }
.records { background-color: #eed9ef; }
footer { background: linear-gradient(180deg, #e6d5f1, #dccbf2); }
.strata i { background: repeating-linear-gradient(176deg, transparent 0 38px, rgba(60,30,20,.26) 38px 41px, transparent 41px 96px, rgba(255,220,170,.16) 96px 99px); }
.lab-glow { background: radial-gradient(closest-side, rgba(190,160,255,.6), rgba(130,120,255,.22) 55%, transparent); }