/* おことの教科書：一覧ページ＋各話共通スタイル */

.cover-stage{padding:170px 6vw 100px;display:flex;justify-content:center;perspective:1200px;}
.cover{position:relative;width:min(420px,86vw);aspect-ratio:3/4;background:#333B31;color:#EFEDE2;display:flex;align-items:center;justify-content:center;box-shadow:14px 18px 40px -14px rgba(43,43,38,.5),inset -8px 0 16px rgba(0,0,0,.3);border-radius:3px 8px 8px 3px;animation:coverIn 1.6s cubic-bezier(.22,.61,.36,1) both;transform-origin:left center;}
@keyframes coverIn{from{opacity:0;transform:rotateY(-26deg) translateY(20px);}to{opacity:1;transform:rotateY(-6deg);}}
.cover:hover{transform:rotateY(0);transition:transform .8s cubic-bezier(.22,.61,.36,1);}
.cover::before{content:"";position:absolute;inset:16px;border:1px solid rgba(217,192,138,.5);pointer-events:none;}
.cover .stitch{position:absolute;left:26px;top:30px;bottom:30px;display:flex;flex-direction:column;justify-content:space-between;}
.cover .stitch i{width:5px;height:26px;background:rgba(217,192,138,.65);border-radius:3px;}
.cover-title{writing-mode:vertical-rl;font-size:clamp(26px,5vw,34px);letter-spacing:.42em;font-weight:500;}
.cover-sub{position:absolute;right:34px;bottom:36px;writing-mode:vertical-rl;font-size:12px;letter-spacing:.3em;color:rgba(239,237,226,.7);}
.cover .en{position:absolute;left:50px;top:34px;font-family:var(--en);font-size:10px;letter-spacing:.4em;color:#D9C08A;}
.cover-lead{max-width:640px;margin:0 auto;padding:0 8vw 30px;text-align:center;font-size:14.5px;color:var(--sumi-soft);line-height:2.4;}

.toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-bottom:100px;}
.toc a{background:var(--washi);border-top:3px solid var(--sage);padding:30px 26px;text-decoration:none;color:var(--sumi);transition:.4s;display:block;}
.toc a:hover{border-top-color:var(--kincha);box-shadow:0 18px 40px -24px rgba(43,43,38,.25);}
.toc .en{font-family:var(--en);font-size:11px;letter-spacing:.35em;color:var(--kincha);}
.toc h3{font-size:16.5px;font-weight:500;letter-spacing:.12em;margin-top:8px;line-height:1.9;}
.toc .excerpt{font-size:12.5px;color:var(--sumi-soft);line-height:1.9;margin-top:10px;}
.toc .soon{opacity:.55;pointer-events:none;}
.toc .soon h3::after{content:"（じゅんび中）";font-size:11px;color:var(--sage-deep);margin-left:6px;}

article{max-width:720px;margin:0 auto;background:var(--washi);padding:80px clamp(28px,6vw,80px);position:relative;
  box-shadow:0 1px 0 rgba(43,43,38,.08),4px 4px 0 -1px var(--kinari),4px 5px 0 rgba(43,43,38,.12),8px 8px 0 -1px var(--kinari),8px 9px 0 rgba(43,43,38,.1),16px 24px 40px -20px rgba(43,43,38,.3);}
article::before{content:"";position:absolute;inset:16px;border:1px solid rgba(95,122,100,.25);pointer-events:none;}
article::after{content:"─ 一 ─";position:absolute;left:50%;transform:translateX(-50%);bottom:26px;font-size:11px;letter-spacing:.4em;color:var(--sage-deep);}
article .toji{position:absolute;left:12px;top:40px;bottom:40px;display:flex;flex-direction:column;justify-content:space-between;}
article .toji i{width:4px;height:22px;background:rgba(95,122,100,.5);border-radius:2px;}
article .kanban{text-align:center;margin-bottom:60px;}
article .kanban .en{font-family:var(--en);font-size:11px;letter-spacing:.5em;color:var(--kincha);}
article h1{font-size:clamp(24px,3.4vw,34px);font-weight:500;letter-spacing:.2em;line-height:2;margin:14px 0 10px;}
article .meta{font-size:12px;color:var(--sumi-soft);letter-spacing:.2em;}
article h2{font-size:19px;font-weight:500;letter-spacing:.16em;margin:64px 0 24px;padding-left:16px;border-left:3px solid var(--kincha);}
article p{font-size:15px;color:var(--sumi-soft);margin-bottom:1.5em;line-height:2.3;}
article strong{color:var(--sumi);font-weight:500;}
.pointbox{background:var(--sage-pale);border-radius:4px;padding:24px 28px;margin:36px 0;font-size:14px;color:var(--sage-deep);line-height:2.2;}
.pointbox b{display:block;font-size:12px;letter-spacing:.3em;margin-bottom:6px;font-weight:500;}

.tune-wrap{background:var(--kinari);border:1px solid rgba(95,122,100,.3);border-radius:4px;padding:30px 22px 16px;margin:40px 0;}
.tune-wrap p.cap{font-size:12px;color:var(--sage-deep);text-align:center;letter-spacing:.2em;margin-bottom:6px;}
.tstr{cursor:pointer;}
.tstr line{stroke:var(--sage-deep);stroke-width:1.6;transition:.2s;}
.tstr:hover line{stroke:var(--kincha);stroke-width:3;}
.tstr text{font-family:var(--mincho);font-size:14px;fill:var(--sumi);}
.tstr .note{font-family:var(--en);font-size:11px;fill:var(--sage-deep);letter-spacing:.05em;}

.ryu-wrap{background:var(--kinari);border:1px solid rgba(95,122,100,.3);border-radius:4px;padding:26px 14px 8px;margin:40px 0;overflow:hidden;}
.ryu-wrap .cap{font-size:12px;color:var(--sage-deep);text-align:center;letter-spacing:.2em;margin-bottom:2px;}
.ryu-wrap svg{width:100%;height:auto;display:block;touch-action:manipulation;}
.kumo ellipse{fill:var(--sage-pale);opacity:.7;}
.kumo.k1{animation:kumoDrift 26s linear infinite;}
.kumo.k2{animation:kumoDrift 34s linear infinite reverse;}
@keyframes kumoDrift{0%{transform:translateX(-40px);}50%{transform:translateX(60px);}100%{transform:translateX(-40px);}}
.ryu-body{fill:#A9805A;stroke:#7A5636;stroke-width:1.5;}
.ryu-head{fill:#8F6A44;stroke:#7A5636;stroke-width:1.5;}
.ryu-tail{fill:#8F6A44;stroke:#7A5636;stroke-width:1.5;}
.ryu-eye{fill:var(--sumi);animation:ryuBlink 5s infinite;transform-origin:697px 192px;}
@keyframes ryuBlink{0%,92%,100%{transform:scaleY(1);}95%{transform:scaleY(.1);}}
.ryu-tsuno,.ryu-hige{fill:none;stroke:#7A5636;stroke-width:2;stroke-linecap:round;}
.ryu-str{stroke:#FDF8EC;stroke-width:1.6;}
.ryu-ji{fill:#FDF8EC;stroke:#C9A24B;stroke-width:1;}
.ryu-hit{fill:transparent;cursor:pointer;}
.ryu-label{opacity:0;transition:opacity .5s,transform .5s;transform:translateY(8px);pointer-events:none;}
.ryu-label.show{opacity:1;transform:none;}
.ryu-label text{font-family:var(--mincho);font-size:15px;fill:var(--sumi);letter-spacing:.1em;}
.ryu-label line{stroke:var(--kincha);stroke-width:1;}
.ryu-label circle{fill:var(--kincha);}
.wiggle{animation:ryuWiggle .6s ease-out;}
@keyframes ryuWiggle{0%{transform:translateY(0);}25%{transform:translateY(4px);}55%{transform:translateY(-3px);}100%{transform:translateY(0);}}

.dougu-wrap{background:var(--kinari);border:1px solid rgba(95,122,100,.3);border-radius:4px;padding:26px 14px 10px;margin:40px 0;}
.dougu-wrap .cap{font-size:12px;color:var(--sage-deep);text-align:center;letter-spacing:.2em;margin-bottom:4px;line-height:1.9;}
.dougu-wrap svg{width:100%;height:auto;display:block;touch-action:manipulation;}
.dg-shape{stroke-width:1.5;}
.k1{fill:#A9805A;stroke:#7A5636;}
.k2{fill:#FDF8EC;stroke:#C9A24B;}
.k3{fill:#F5EEDC;stroke:#C4B28A;}
.k4{fill:#8F6A44;stroke:#6E4E2E;}
.k5{fill:#FBF7EA;stroke:#8A9B84;}
.k6{fill:#FCFAF3;stroke:#8A9B84;}
.k7{fill:#E8EDE6;stroke:#5F7A64;}
.dg-str{stroke:#FDF8EC;stroke-width:1.2;}
.dg-ji-mini{fill:#FDF8EC;stroke:#C9A24B;stroke-width:.8;}
.dg-pole{stroke:#8A9B84;stroke-width:3;stroke-linecap:round;}
.dg-needle{stroke:var(--kincha);stroke-width:2;stroke-linecap:round;transform-origin:600px 280px;animation:tunerSwing 3.4s ease-in-out infinite alternate;}
@keyframes tunerSwing{from{transform:rotate(-16deg);}to{transform:rotate(14deg);}}
.dg-dot{fill:var(--kincha);}
.dg-score{font-family:var(--mincho);font-size:17px;fill:var(--sumi);text-anchor:middle;}
.dg-hit{fill:transparent;cursor:pointer;}
.dg-item{transition:opacity .3s;}
.dg-item .dg-label{opacity:0;transition:opacity .5s,transform .5s;transform:translateY(6px);pointer-events:none;}
.dg-item.found .dg-label{opacity:1;transform:none;}
.dg-label text{font-family:var(--mincho);font-size:15px;fill:var(--sumi);letter-spacing:.08em;}
.dg-item.found .dg-shape{stroke:var(--kincha);filter:drop-shadow(0 0 5px rgba(190,146,64,.45));}
.dg-item.pop{animation:dgPop .5s ease-out;}
@keyframes dgPop{0%{transform:translateY(0);}30%{transform:translateY(-6px);}70%{transform:translateY(2px);}100%{transform:translateY(0);}}

.tsume-wrap{background:var(--kinari);border:1px solid rgba(95,122,100,.3);border-radius:4px;padding:26px 14px 14px;margin:40px 0;overflow:hidden;}
.tsume-wrap .cap{font-size:12px;color:var(--sage-deep);text-align:center;letter-spacing:.2em;margin-bottom:4px;}
.tsume-wrap svg{width:100%;height:auto;display:block;touch-action:manipulation;cursor:pointer;}
.tsu-koto{fill:#A9805A;stroke:#7A5636;stroke-width:1.5;}
.tsu-ji{stroke:#FDF8EC;stroke-width:2;}
.tsu-style-label{font-family:var(--mincho);font-size:14px;fill:var(--kincha);letter-spacing:.3em;}
.tsu-player{transform-origin:0 0;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.tsu-player.ikuta{transform:translate(190px,58px) rotate(-38deg);}
.tsu-player.yamada{transform:translate(340px,18px) rotate(0deg);}
.tsu-head{fill:var(--washi);stroke:var(--sage-deep);stroke-width:2;}
.tsu-arm{stroke:var(--sage-deep);stroke-width:3;stroke-linecap:round;}
.tsu-shape{stroke-width:1.3;transition:opacity .4s;}
.tsu-shape.kaku{fill:#F5EEDC;stroke:#C4B28A;}
.tsu-shape.maru{fill:#FCF7EA;stroke:#C9A24B;opacity:0;}
.tsu-tsume.show-maru .kaku{opacity:0;}
.tsu-tsume.show-maru .maru{opacity:1;}
.tsu-hit{fill:transparent;cursor:pointer;}

.kanji-wrap{background:var(--kinari);border:1px solid rgba(95,122,100,.3);border-radius:4px;padding:26px 14px 14px;margin:40px 0;overflow:hidden;}
.kanji-wrap .cap{font-size:12px;color:var(--sage-deep);text-align:center;letter-spacing:.2em;margin-bottom:4px;}
.kanji-wrap svg{width:100%;height:auto;display:block;touch-action:manipulation;cursor:pointer;}
.kj-board{fill:#8F6A44;stroke:#6E4E2E;stroke-width:2;}
.kj-board-inner{fill:#FDF8EC;stroke:#C9A24B;stroke-width:1;}
.kj-char{font-family:var(--mincho);font-size:88px;fill:var(--sumi);opacity:0;transition:opacity .4s;}
.kj-char.show{opacity:1;}
.kj-sub{font-family:var(--mincho);font-size:13px;fill:var(--sage-deep);letter-spacing:.15em;}
.kj-hit{fill:transparent;cursor:pointer;}

.score-wrap{background:var(--kinari);border:1px solid rgba(95,122,100,.3);border-radius:4px;padding:30px 14px 20px;margin:40px 0;display:flex;flex-direction:column;align-items:center;gap:14px;}
.score-wrap .cap{font-size:12px;color:var(--sage-deep);text-align:center;letter-spacing:.2em;line-height:1.9;}
.score-col{writing-mode:vertical-rl;background:var(--washi);border:1px solid rgba(95,122,100,.3);border-radius:2px;padding:28px 20px;font-family:var(--mincho);font-size:30px;letter-spacing:.55em;color:var(--sumi);box-shadow:2px 2px 0 rgba(43,43,38,.06);}
.score-ch{cursor:pointer;padding:2px 6px;display:inline-block;position:relative;transition:color .3s;}
.score-ch.found{color:var(--kincha);}
.score-ch.pop{animation:dgPop .5s ease-out;}
@media(max-width:680px){.score-col{font-size:24px;letter-spacing:.45em;}}

@media(max-width:680px){
  .dg-label text{font-size:26px;}
  .dg-score{font-size:22px;}
  .ryu-label text{font-size:24px;}
  .tsu-style-label{font-size:20px;}
  .kj-char{font-size:64px;}
}

.next-nav{max-width:720px;margin:60px auto 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;}
.next-nav a{color:var(--sumi);text-decoration:none;border-bottom:1px solid var(--kincha);padding-bottom:3px;}
.next-nav .soon{color:var(--sumi-soft);border-bottom:1px solid transparent;}