/* マンガ（manga.html）。縦スクロールで読む。try-web.css の後に読む */
:root{--bar:58px;--gap:14px}
html{scroll-behavior:auto;scroll-padding-top:calc(var(--bar) + env(safe-area-inset-top) + 10px)}
.js{scroll-snap-type:y proximity}
.mv-body{background:#11161a;color:#fff}

/* 上のバー（固定） */
.mv-top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:14px;height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left));background:rgba(17,22,26,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mv-logo img{height:26px;width:auto}
.mv-title{margin:0;font-size:14px;font-weight:700;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.mv-count{margin:0 0 0 auto;font-family:'Fugaz One',sans-serif;font-size:15px;letter-spacing:.06em;color:rgba(255,255,255,.6);white-space:nowrap}
.mv-count b{color:#fff;font-weight:400;font-size:19px}
.mv-close{position:relative;width:44px;height:44px;border-radius:50%;flex:none;transition:background .2s}
.mv-close:hover,.mv-close:focus-visible{background:rgba(255,255,255,.12)}
.mv-close i::before,.mv-close i::after{content:"";position:absolute;left:12px;top:21px;width:20px;height:2px;background:#fff;border-radius:2px;transform:rotate(45deg)}
.mv-close i::after{transform:rotate(-45deg)}
.mv-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1)}
.mv-progress i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
html:not(.js) .mv-progress,html:not(.js) .mv-count{display:none}

/* ページを縦に並べる。1ページが画面の高さに収まる大きさにする（スマホは画面の幅いっぱい） */
.mv-list{padding:calc(var(--bar) + env(safe-area-inset-top) + 10px) 0 0}
.mv-slide{display:flex;justify-content:center;padding:0 0 var(--gap);scroll-snap-align:start}
.mv-pg{position:relative;width:min(100vw, (100vh - var(--bar) - 10px - var(--gap)) * 2 / 3);width:min(100vw, (100svh - var(--bar) - env(safe-area-inset-top) - 10px - var(--gap)) * 2 / 3);aspect-ratio:2/3;background:#20262c;box-shadow:0 10px 34px rgba(0,0,0,.5)}
.mv-pg > img:first-child{display:block;width:100%;height:100%;-webkit-user-drag:none;-webkit-touch-callout:none}

/* 動くコマ（動画）と、その上に重ねる元の絵（見出し・吹き出し・効果音）。位置は build.py が style に書く */
.mv-anim{position:absolute;object-fit:cover;opacity:0;transition:opacity .6s;pointer-events:none}
.mv-anim.on{opacity:1}
.mv-ov{position:absolute;height:auto;pointer-events:none;-webkit-user-drag:none}

/* おわり */
.mv-endslide{min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar) - env(safe-area-inset-top));align-items:center;padding:16px 12px calc(40px + env(safe-area-inset-bottom))}
.mv-end{background:#fff;color:var(--ink);border:2px solid var(--ink);border-top:7px solid var(--red);border-radius:0 0 8px 8px;max-width:460px;width:100%;padding:34px 30px 26px;text-align:center}
.mv-end .en{margin:0 0 12px;font-size:13px}
.mv-end-h{margin:0 0 14px;font-size:30px;font-weight:800;line-height:1.35}
.mv-end-h span{color:var(--red)}
.mv-end-s{margin:0 0 22px;font-size:14.5px;line-height:1.9;color:var(--sub)}
.mv-end .btn{display:block;width:100%;margin:0 0 12px;padding:15px 18px;font-size:15.5px;font-weight:800;border-radius:999px;text-align:center;transition:opacity .2s,background .2s,color .2s}
.mv-end .btn.red{background:var(--red);color:#fff}
.mv-end .btn.red:hover{opacity:.88}
.mv-end .btn.line{border:2px solid var(--ink);color:var(--ink);background:#fff}
.mv-end .btn.line:hover{background:var(--ink);color:#fff}
.mv-again{appearance:none;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--sub);padding:10px 12px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.mv-again:hover{color:var(--ink)}

/* 最初だけ出す「下へスクロール」の案内 */
.mv-hint{display:none}
.js .mv-hint{display:flex;align-items:center;gap:8px;position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9;margin:0;padding:9px 20px 9px 16px;border-radius:999px;background:rgba(17,22,26,.86);border:1px solid rgba(255,255,255,.28);font-size:13.5px;font-weight:700;white-space:nowrap;pointer-events:none;transition:opacity .5s}
.mv-hint i{width:10px;height:10px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg);margin-top:-5px;animation:mv-down 1.4s ease-in-out infinite}
@keyframes mv-down{0%,100%{translate:0 0}50%{translate:0 4px}}
.hint-off .mv-hint{opacity:0}

@media (max-width:600px){
  :root{--bar:52px;--gap:10px}
  .mv-top{padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(4px + env(safe-area-inset-right));gap:10px}
  .mv-logo img{height:22px}
  .mv-title{display:none}
  .mv-end{padding:26px 20px 18px}
  .mv-end-h{font-size:25px}
}
/* 横向きのスマホなど高さが低い画面は、ページを画面の幅に合わせて読みやすくする（1ページ内もスクロール） */
@media (max-height:500px) and (orientation:landscape){
  :root{--bar:44px}
  .js{scroll-snap-type:none}
  .mv-pg{width:min(100vw - 24px, 560px)}
}
@media (prefers-reduced-motion:reduce){.mv-anim{display:none}.mv-hint i{animation:none}}

/* 広い画面では案内を右下の余白に出し、扉絵の文字にかぶらないようにする */
@media (min-width:760px){.js .mv-hint{left:auto;right:28px;transform:none}}
/* JS が無いときは noscript の画像を表示（読み込み待ちの透明画像は隠す） */
html:not(.js) .mv-pg > img[data-src]{display:none}
html:not(.js) .mv-pg noscript img{display:block;width:100%;height:100%}
/* マンガのページは文字が少ないので、Webフォント(LINE Seed JP 約570KB)を読まず端末の日本語フォントで表示して軽くする */
body.mv-body,.mv-body .btn,.mv-again{font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','Meiryo',sans-serif}