/* COC CAFE ストーリーページ専用。すべて .coc-story の中だけに効きます */
.coc-story{
  --cs-bg:#EFDDB8; --cs-paper:#F8EEDB; --cs-ink:#3A2217; --cs-sub:#7A5238; --cs-line:#C9A980;
  --cs-amber:#C98A2E; --cs-red:#C8261E; --cs-espresso:#4A2A18; --cs-milk:#EAD3AE; --cs-foam:#FBF4E6;
  --cs-glass:rgba(255,255,255,.35); --cs-bug:#2A1A12;
  /* テーマのヘッダーが固定表示なら、その高さを入れてください（例：64px） */
  --cs-top:0px;
  background:var(--cs-bg); color:var(--cs-ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:15px; line-height:1.95; letter-spacing:.02em;
}
.coc-story *,.coc-story *::before,.coc-story *::after{box-sizing:border-box}
/* テーマの枠（白い箱）を抜けて、画面幅いっぱいに敷く */
.coc-story{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
body:has(.coc-story){overflow-x:clip}
/* テーマ側の白い背景・影・枠を打ち消す */
.coc-story .cs-hero,.coc-story .cs-story,.coc-story .cs-ending{background:transparent!important;box-shadow:none!important;border:0!important}
/* テーマの section{padding} が章に効いて間延びするのを止める */
.coc-story section{padding:0}
/* テーマ側の文字間・余白の上書き */
.coc-story h1,.coc-story h2,.coc-story p,.coc-story small,.coc-story div{letter-spacing:.02em}

.coc-story .cs-hero{min-height:calc(66svh - var(--cs-top));display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,8vw,120px);max-width:1040px;margin:0 auto}
.coc-story .cs-title{font-family:"Klee One",serif;font-weight:600;margin:0;line-height:1;
  font-size:clamp(36px,5vw,68px);letter-spacing:.01em;color:var(--cs-ink)}
.coc-story .cs-dot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--cs-red);
  margin-left:.08em;transform:translateY(-.1em)}
.coc-story .cs-lead{font-family:"Klee One",serif;font-size:clamp(14px,1.3vw,17px);line-height:1.7;margin:16px 0 0;color:var(--cs-sub);max-width:none}
.coc-story .cs-hint{margin-top:36px;font-size:13px;color:var(--cs-sub);display:flex;align-items:center;gap:10px}
.coc-story .cs-hint span{display:block;width:1px;height:40px;background:var(--cs-line);position:relative;overflow:hidden}
.coc-story .cs-hint span::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--cs-ink);
  animation:csDrip 2.4s ease-in-out infinite}
@keyframes csDrip{to{top:100%}}

.coc-story .cs-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,96px);
  max-width:1040px;margin:0 auto;padding:0 clamp(24px,8vw,120px)}
.coc-story .cs-chapters{position:relative;padding-left:52px}
.coc-story .cs-chapters::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(to bottom,var(--cs-line) 0 6px,transparent 6px 12px)}
.coc-story .cs-rail-bug{position:absolute;left:3px;top:0;width:25px;height:25px;will-change:transform}
.coc-story .cs-rail-bug svg{transform:rotate(180deg);display:block}
.coc-story .cs-chapter{min-height:72vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.3;transition:opacity .6s ease}
.coc-story .cs-chapter.is-active{opacity:1}
.coc-story .cs-when{font-size:13px;color:var(--cs-sub);margin:0}
.coc-story .cs-chapter h2{font-family:"Klee One",serif;font-weight:600;font-size:clamp(20px,2vw,26px);
  line-height:1.4;margin:4px 0 12px;color:var(--cs-ink)}
.coc-story .cs-chapter p{margin:0;max-width:30em}

.coc-story .cs-stage{position:sticky;top:var(--cs-top);height:calc(100svh - var(--cs-top));display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px}
.coc-story .cs-cup{width:min(190px,60%);height:auto;overflow:visible}
.coc-story .cs-layer{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.coc-story .cs-layer.on{transform:scaleY(1)}
.coc-story .cs-rim-bug{opacity:0;transform:translate(0,-26px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.coc-story .cs-rim-bug.on{opacity:1;transform:translate(0,0)}
.coc-story .cs-caption{font-family:"Klee One",serif;font-size:16px;color:var(--cs-sub);min-height:1.9em;text-align:center}

.coc-story .cs-ending{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.coc-story .cs-ending p{font-family:"Klee One",serif;font-size:clamp(18px,2vw,24px);margin:0}
.coc-story .cs-ending small{display:block;margin-top:16px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:14px;color:var(--cs-sub)}

@media (max-width:760px){
  .coc-story .cs-story{grid-template-columns:1fr;padding:0 20px}
  .coc-story .cs-stage{order:-1;height:auto;padding:14px 0 10px;z-index:2;
    background:var(--cs-bg);flex-direction:row;gap:14px;border-bottom:1px solid var(--cs-line)}
  .coc-story .cs-cup{width:72px}
  .coc-story .cs-caption{font-size:15px;text-align:left}
  .coc-story .cs-chapters{padding-left:44px}
  .coc-story .cs-chapter{min-height:58vh;padding:32px 0}
  .coc-story .cs-chapter p{font-size:15px;line-height:1.9}
  .coc-story .cs-hero{min-height:auto;padding-top:56px;padding-bottom:56px}
}
@media (prefers-reduced-motion:reduce){
  .coc-story .cs-layer,.coc-story .cs-rim-bug,.coc-story .cs-chapter{transition:none}
  .coc-story .cs-hint span::after{animation:none}
}