@charset "utf-8";
/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  color: #333;
  width: 100%;
  overflow-x: hidden !important;
  background: #1a1a2e !important;
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif !important;
}
ol, ul {
  list-style: none;
}
a {
  text-decoration: none !important;
}
a:hover {
  opacity: 0.8;
}
img {
  vertical-align: bottom;
}

/* ==============================
   FV
============================== */
.manga-fv {
  max-width: 600px !important;
  margin: 0 auto !important;
  line-height: 0 !important;
}
.manga-fv img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ==============================
   Vertical Scroll Manga
============================== */
.manga-scroll {
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 0 60px !important;
}

/* Panel */
.manga-panel {
  position: relative !important;
  margin: 0 auto 2px !important;
  line-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}
.manga-panel.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.manga-panel img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ==============================
   CTA
============================== */
.manga-cta {
  padding: 40px 20px !important;
  text-align: center !important;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%) !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}
.manga-cta.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.cta-lead {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  margin-bottom: 8px !important;
}

.cta-sub-lead {
  color: rgba(255,255,255,0.8) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}
.cta-sub-lead strong {
  color: #7fff7f !important;
  font-size: 18px !important;
}

.cta-headline {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  margin-bottom: 20px !important;
}

.cta-points {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
}
.cta-points span {
  color: #ccc !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 20px !important;
  line-height: 1.4 !important;
}
.cta-points span strong {
  color: #7fff7f !important;
  font-size: 16px !important;
}

.cta-btn {
  display: block !important;
  max-width: 360px !important;
  margin: 0 auto 12px !important;
  padding: 16px 24px !important;
  background: linear-gradient(135deg, #ff6b35, #ff4444) !important;
  color: #fff !important;
  border-radius: 60px !important;
  text-align: center !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 4px 16px rgba(255,68,68,0.4) !important;
}
.cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(255,68,68,0.5) !important;
  opacity: 1 !important;
}
.cta-btn-sub {
  display: block !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.85) !important;
  margin-bottom: 4px !important;
}
.cta-btn-main {
  display: block !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 1px !important;
}

.cta-btn-web {
  background: linear-gradient(135deg, #00b894, #00a880) !important;
  box-shadow: 0 4px 16px rgba(0,184,148,0.4) !important;
}
.cta-btn-web:hover {
  box-shadow: 0 6px 24px rgba(0,184,148,0.5) !important;
}
.cta-btn-web .cta-btn-main {
  font-size: 18px !important;
}

.cta-note {
  color: rgba(255,255,255,0.5) !important;
  font-size: 12px !important;
  margin-top: 12px !important;
  line-height: 1.4 !important;
}

.cta-final {
  padding: 50px 20px 60px !important;
}

/* ==============================
   LP01 横スワイプリーダー
============================== */
.manga-reader {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 0 40px !important;
  position: relative !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.manga-viewport {
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  touch-action: pan-y pinch-zoom !important;
  cursor: grab !important;
}
.manga-viewport:active {
  cursor: grabbing !important;
}

.manga-track {
  display: flex !important;
  width: 800% !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform !important;
}
.manga-track.dragging {
  transition: none !important;
}

.manga-page {
  width: 12.5% !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
}
.manga-page img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  pointer-events: none !important;
}

/* Controls */
.manga-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  padding: 16px 0 8px !important;
}

.manga-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
}
.manga-btn:hover {
  background: rgba(255,255,255,0.2) !important;
  border-color: rgba(255,255,255,0.5) !important;
  transform: scale(1.1) !important;
}
.manga-btn:disabled {
  opacity: 0.3 !important;
  cursor: default !important;
  transform: none !important;
}
.manga-btn svg {
  width: 24px !important;
  height: 24px !important;
}

.manga-indicator {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: 2px !important;
  min-width: 60px !important;
  text-align: center !important;
}

/* Progress Bar */
.manga-progress {
  width: 100% !important;
  height: 3px !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 3px !important;
  margin: 4px 0 12px !important;
  overflow: hidden !important;
}
.manga-progress-bar {
  height: 100% !important;
  width: 12.5% !important;
  background: linear-gradient(90deg, #00d2ff, #3a7bd5) !important;
  border-radius: 3px !important;
  transition: width 0.4s ease !important;
}

/* Dots */
.manga-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}
.manga-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255,255,255,0.25) !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  padding: 0 !important;
}
.manga-dot:hover {
  background: rgba(255,255,255,0.5) !important;
}
.manga-dot.active {
  background: #00d2ff !important;
  transform: scale(1.3) !important;
  box-shadow: 0 0 8px rgba(0,210,255,0.5) !important;
}

/* ==============================
   LP02（スマホ特化・PC500px中央）
============================== */
.manga-scroll.lp02 {
  max-width: 500px !important;
}
.manga-scroll.lp02 .manga-panel {
  margin: 0 auto !important;
}

/* ==============================
   漫画TOP（/manga/ 全話まとめ）
============================== */
/* overflow は指定しない（position:sticky のナビが効かなくなるため） */
.manga-top {
  background: #0d0d16 !important;
}

/* ---- FV ---- */
.mt-fv {
  position: relative !important;
  min-height: 100svh !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-align: center !important;
}
.mt-fv-bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center 45% !important;
  filter: grayscale(0.3) brightness(0.4) !important;
  /* 1コマ目を流用する場合、上部のナレーション帯が見えないよう大きめに寄せている。
     専用のキービジュアルを image/kv.png に置けば自動でそちらが使われる。 */
  transform: scale(1.35) !important;
  animation: mtFvZoom 18s ease-out forwards !important;
}
.mt-fv-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at center, rgba(13,13,22,0.35) 0%, rgba(13,13,22,0.9) 70%, #0d0d16 100%) !important;
}
@keyframes mtFvZoom {
  from { transform: scale(1.5); }
  to   { transform: scale(1.35); }
}

/* PC用 / SP用 の出し分け（SPは respons.css で入れ替え） */
.mt-fv-bg.is-sp { display: none !important; }

/* 専用キービジュアル（image/FV-pc.png）がある場合。
   絵をなるべく明るく・切らずに見せ、文字が乗る左右だけを暗く落とす。 */
.mt-fv.has-kv .mt-fv-bg {
  left: 0 !important;             /* サイドバーはKVの余白の上に重ねる */
  /* 左端を基準に表示する。KVの左22%は空けてあるので、
     ここを切ると依頼者3人にサイドバーが被る。 */
  background-position: left center !important;
  transform: scale(1) !important;
  filter: none !important;
  animation: mtFvZoomKv 24s ease-out forwards !important;
}
.mt-fv.has-kv .mt-fv-bg::after {
  background:
    /* 左＝サイドバー / 右＝縦書きとバッジ の下だけ暗く */
    linear-gradient(90deg,
      rgba(13,13,22,0.92) 0%,
      rgba(13,13,22,0.5) 20%,
      rgba(13,13,22,0) 38%,
      rgba(13,13,22,0) 60%,
      rgba(13,13,22,0.45) 86%,
      rgba(13,13,22,0.75) 100%),
    linear-gradient(180deg,
      rgba(13,13,22,0.3) 0%,
      rgba(13,13,22,0) 25%,
      rgba(13,13,22,0) 72%,
      rgba(13,13,22,0.65) 100%) !important;
}
@keyframes mtFvZoomKv {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* KVがあるときはサイドバーを半透明にして、空を透かせる */
.mt-fv.has-kv .mt-fv-inner {
  background: linear-gradient(90deg,
    rgba(13,13,22,0.95) 0%,
    rgba(13,13,22,0.85) 60%,
    rgba(13,13,22,0.55) 100%) !important;
  box-shadow: none !important;
}
.mt-fv.has-kv .mt-fv-inner::after {
  background: linear-gradient(90deg, rgba(13,13,22,0.55), rgba(13,13,22,0)) !important;
}

/* ---- PC: 左サイドバー型（コナン公式サイト風） ---- */
.mt-fv {
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.mt-fv-bg {
  left: 340px !important; /* サイドバーの幅ぶん右へ */
}

.mt-fv-inner {
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 340px !important;
  width: 340px !important;
  padding: 40px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important; /* ラベル等が横に伸びないように */
  background: linear-gradient(180deg, #14141f 0%, #0d0d16 100%) !important;
  box-shadow: 12px 0 40px rgba(0,0,0,0.6) !important;
}

/* サイドバーからKVへのなじませグラデ */
.mt-fv-inner::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  width: 90px !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(13,13,22,0.95), rgba(13,13,22,0)) !important;
  pointer-events: none !important;
}

/* ナビ */
.mt-fv-menu {
  align-self: stretch !important;
  margin: 28px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  animation: mtFadeUp 1.2s ease 1s both !important;
}
.mt-fv-menu a {
  display: block !important;
  padding: 14px 2px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  line-height: 1 !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  transition: color 0.2s, padding-left 0.2s !important;
}
.mt-fv-menu a span {
  display: block !important;
  margin-top: 7px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,0.5) !important;
}
.mt-fv-menu a:hover {
  color: #ffd479 !important;
  padding-left: 8px !important;
  opacity: 1 !important;
}

/* 「毎週土曜日 新エピソード公開」 */
.mt-fv-onair {
  color: #fff !important;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8) !important;
  animation: mtFadeUp 1.2s ease 1.2s both !important;
}
.mt-fv-onair-no {
  color: #ffd479 !important;
  font-size: 34px !important;
}

/* 縦書きキャッチ */
.mt-fv-copy-v {
  position: absolute !important;
  z-index: 3 !important;
  top: 12% !important;
  right: 200px !important; /* 右の丸バッジと重ならない位置 */
  writing-mode: vertical-rl !important;
  -webkit-writing-mode: vertical-rl !important;
  color: #fff !important;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 6px !important;
  line-height: 1.4 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.95), 0 0 30px rgba(0,0,0,0.8) !important;
  padding-left: 20px !important;
  border-left: 1px solid rgba(255,255,255,0.35) !important;
  animation: mtFadeUp 1.4s ease 0.9s both !important;
}

/* 丸バッジCTA */
.mt-fv-badges {
  position: absolute !important;
  z-index: 3 !important;
  top: 50% !important;
  right: 24px !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  animation: mtFadeUp 1.2s ease 1.4s both !important;
}
.mt-fv-badge {
  width: 106px !important;
  height: 106px !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 6px !important;
  background: linear-gradient(135deg, #ff8f4d, #ff4444) !important;
  border: 2px solid rgba(255,255,255,0.85) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
  transition: transform 0.2s !important;
}
.mt-fv-badge:hover {
  transform: scale(1.06) !important;
  opacity: 1 !important;
}
.mt-fv-badge.is-tel {
  background: linear-gradient(135deg, #00c9a0, #00a880) !important;
}
.mt-fv-badge-sub {
  display: block !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}
.mt-fv-badge-main {
  display: block !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}
.mt-fv-badge.is-tel .mt-fv-badge-main {
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

/* スマホ用の要素はPCでは隠す（サイドバーのナビ・縦書きが担当） */
.mt-fv > .mt-fv-btn,
.mt-fv-inner .mt-fv-copy {
  display: none !important;
}

.mt-fv-label {
  display: inline-block !important;
  color: #ffd479 !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  padding: 6px 16px !important;
  border: 1px solid rgba(255,212,121,0.5) !important;
  margin-bottom: 28px !important;
  line-height: 1 !important;
  animation: mtFadeUp 1s ease 0.2s both !important;
}

.mt-fv-title {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif !important;
  font-size: 54px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: 2px !important;
  margin: 0 0 24px !important;
  background: linear-gradient(180deg, #fff 0%, #ffe9b8 55%, #e0a94a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.8)) !important;
  animation: mtFadeUp 1.2s ease 0.4s both !important;
}

/* 短いタイトル（漢字数文字）用。字間を空けて劇画タイトル風に。
   ⚠️ サイドバー内寸は 284px（340px − padding 28px×2）。
   これを超えると、はみ出た部分に金グラデが乗らず黒欠けする。
   必要幅 ≒ 文字数 × font-size × (1 + letter-spacing) + text-indent で計算すること。
   （3文字 × 76px × 1.16 + 12px ≒ 277px で収まる） */
.mt-fv-title.is-short {
  font-size: 76px !important;
  letter-spacing: 0.16em !important;
  text-indent: 0.16em !important; /* 字間の分だけ右にずれるのを打ち消す */
  line-height: 1.2 !important;
  margin-bottom: 28px !important;
}

/* ふりがな */
.mt-fv-title ruby {
  ruby-position: over !important;
}
.mt-fv-title rt {
  font-size: 0.16em !important;
  font-weight: 700 !important;
  letter-spacing: 0.35em !important;
  text-indent: 0.35em !important;
  color: #e8c98a !important;
  -webkit-text-fill-color: #e8c98a !important;
  transform: translateY(-0.6em) !important;
}

.mt-fv-copy {
  color: #fff !important;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  letter-spacing: 2px !important;
  margin-bottom: 10px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9) !important;
  animation: mtFadeUp 1.2s ease 0.7s both !important;
}
.mt-fv-sub {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  margin-bottom: 36px !important;
  animation: mtFadeUp 1.2s ease 0.9s both !important;
}

.mt-fv-btn {
  display: inline-block !important;
  padding: 16px 48px !important;
  color: #0d0d16 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  border-radius: 60px !important;
  background: linear-gradient(135deg, #ffe9b8, #e0a94a) !important;
  box-shadow: 0 6px 24px rgba(224,169,74,0.4) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  animation: mtFadeUp 1.2s ease 1.1s both !important;
}
.mt-fv-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(224,169,74,0.55) !important;
  opacity: 1 !important;
}

@keyframes mtFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mt-fv-scroll {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  width: 1px !important;
  height: 50px !important;
  background: rgba(255,255,255,0.2) !important;
  overflow: hidden !important;
}
.mt-fv-scroll span {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 50% !important;
  background: #ffd479 !important;
  animation: mtScrollLine 2s ease-in-out infinite !important;
}
@keyframes mtScrollLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* ---- 話数ナビ（追従） ---- */
.mt-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(13,13,22,0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.mt-nav-inner {
  display: flex !important;
  gap: 4px !important;
  overflow-x: auto !important;
  padding: 10px 12px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  scrollbar-width: none !important;
}
.mt-nav-inner::-webkit-scrollbar { display: none !important; }

.mt-nav-item {
  flex: 0 0 auto !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.75) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  line-height: 1 !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}
.mt-nav-item:hover {
  color: #0d0d16 !important;
  background: #ffd479 !important;
  border-color: #ffd479 !important;
  opacity: 1 !important;
}
.mt-nav-item.is-active {
  color: #0d0d16 !important;
  background: #ffd479 !important;
  border-color: #ffd479 !important;
}
.mt-nav-item.is-soon {
  color: rgba(255,255,255,0.25) !important;
  border-style: dashed !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ---- セクション見出し ---- */
.mt-sec-title {
  text-align: center !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 12px !important;
  letter-spacing: 6px !important;
  margin: 0 0 32px !important;
  line-height: 1 !important;
}
.mt-sec-title span {
  display: block !important;
  color: #fff !important;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  margin-bottom: 10px !important;
}

/* ---- 目次 ---- */
.mt-index {
  padding: 64px 16px 56px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.mt-index-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 16px !important;
}
.mt-index-item a,
.mt-index-item {
  display: block !important;
  color: inherit !important;
}
.mt-index-item a { transition: transform 0.25s !important; }
.mt-index-item a:hover { transform: translateY(-4px) !important; opacity: 1 !important; }

.mt-index-thumb {
  display: block !important;
  position: relative !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  background: #1a1a2e !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  line-height: 0 !important;
}
.mt-index-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}
.mt-index-item a:hover .mt-index-thumb {
  border-color: #ffd479 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important;
}

.mt-index-lock {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.3) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  background: repeating-linear-gradient(45deg, #14141f, #14141f 8px, #191925 8px, #191925 16px) !important;
}

.mt-index-body {
  display: block !important;
  padding: 10px 2px 0 !important;
}
.mt-index-no {
  display: block !important;
  color: #ffd479 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin-bottom: 6px !important;
  line-height: 1 !important;
}
.mt-index-name {
  display: block !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
.mt-index-item.is-soon .mt-index-no,
.mt-index-item.is-soon .mt-index-name {
  color: rgba(255,255,255,0.3) !important;
}

/* ---- 各話 ---- */
.mt-episode {
  padding-top: 40px !important;
  scroll-margin-top: 56px !important;
}
.mt-ep-head {
  text-align: center !important;
  padding: 40px 20px 36px !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.mt-ep-no {
  color: #ffd479 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 5px !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
}
.mt-ep-title {
  color: #fff !important;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: 2px !important;
}

.mt-episode .manga-scroll {
  padding-bottom: 0 !important;
}

.mt-ep-cta {
  padding: 44px 20px !important;
}

.mt-ep-end {
  text-align: center !important;
  color: rgba(255,255,255,0.3) !important;
  font-size: 13px !important;
  letter-spacing: 3px !important;
  padding: 8px 20px 56px !important;
}

/* ---- 次回予告 ---- */
.mt-next {
  text-align: center !important;
  padding: 64px 20px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.mt-next-label {
  color: rgba(255,255,255,0.35) !important;
  font-size: 11px !important;
  letter-spacing: 5px !important;
  margin-bottom: 16px !important;
  line-height: 1 !important;
}
.mt-next-text {
  color: #fff !important;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif !important;
  font-size: 22px !important;
  letter-spacing: 3px !important;
  line-height: 1.6 !important;
}

/* ==============================
   漫画TOP FV：狭い画面（タブレット〜スマホ）は
   サイドバーをやめて中央揃えの1カラムに戻す
============================== */
@media screen and (max-width: 1024px) {
  .mt-fv {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .mt-fv-bg {
    left: 0 !important;
  }
  /* 1カラムになる幅では縦長KVに切り替える */
  .mt-fv-bg.is-pc { display: none !important; }
  .mt-fv-bg.is-sp { display: block !important; }

  .mt-fv-inner {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 680px !important;
    padding: 40px 20px !important;
    align-items: center !important; /* PCの左寄せを解除 */
    background: none !important;
    box-shadow: none !important;
  }
  .mt-fv-inner::after {
    display: none !important;
  }
  /* 縦書きキャッチのみ隠す（同じ文言を横書き .mt-fv-copy が表示するため） */
  .mt-fv-copy-v {
    display: none !important;
  }
  /* メニューはPCと同様に表示（幅だけ画面に収める） */
  .mt-fv-menu {
    width: 100% !important;
    max-width: 340px !important;
    margin: 20px auto !important;
    text-align: left !important;
  }
  .mt-fv-menu a {
    padding: 12px 2px !important;
    font-size: 14px !important;
  }
  .mt-fv-menu a span {
    margin-top: 5px !important;
    font-size: 11px !important;
  }
  /* KVに文字が重なるので読みやすさ確保 */
  .mt-fv-menu a {
    text-shadow: 0 1px 8px rgba(0,0,0,0.85) !important;
  }
  .mt-fv-menu a span {
    text-shadow: 0 1px 6px rgba(0,0,0,0.85) !important;
  }
  /* 丸バッジもPCと同様に表示。読むボタンと被らないよう右下寄せ＋縮小 */
  .mt-fv-badges {
    top: auto !important;
    bottom: 150px !important;
    right: 10px !important;
    transform: none !important;
    gap: 10px !important;
  }
  .mt-fv-badge {
    width: 94px !important;
    height: 94px !important;
  }
  .mt-fv-badge-sub {
    font-size: 8px !important;
  }
  .mt-fv-badge-main {
    font-size: 14px !important;
  }
  .mt-fv-badge.is-tel .mt-fv-badge-main {
    font-size: 11px !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
  }
  /* スマホ専用パーツを出す */
  .mt-fv-inner .mt-fv-copy {
    display: block !important;
  }
  /* 読むボタンは画面下部に固定配置（親指が届く位置） */
  .mt-fv > .mt-fv-btn {
    display: inline-block !important;
    position: absolute !important;
    z-index: 3 !important;
    bottom: 88px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important; /* left:50%起点だと利用可能幅が半分になり折り返すため */
  }
  .mt-fv-onair {
    font-size: 20px !important;
    margin-top: 22px !important;
  }
  .mt-fv-onair-no {
    font-size: 26px !important;
  }

  /* --- 専用KVがある場合の狭い画面用の調整 --- */
  /* 文字は上（空の部分）に寄せて、キャラに被せない */
  .mt-fv.has-kv {
    justify-content: flex-start !important;
  }
  .mt-fv.has-kv .mt-fv-inner {
    /* 下360pxは丸バッジ(348px)＋読むボタンの帯。画面が低くてもテキストと被らないよう予約 */
    padding: 26px 20px 360px !important;
    background: none !important;  /* PCのサイドバー用パネルを消す */
  }
  .mt-fv.has-kv .mt-fv-inner::after {
    display: none !important;
  }
  /* PC用の横方向グラデを、上下方向（タイトル部とボタン部）に置き換える */
  .mt-fv.has-kv .mt-fv-bg {
    background-position: center center !important;
  }
  .mt-fv.has-kv .mt-fv-bg::after {
    background: linear-gradient(180deg,
      rgba(13,13,22,0.85) 0%,
      rgba(13,13,22,0.55) 28%,
      rgba(13,13,22,0) 46%,
      rgba(13,13,22,0) 60%,
      rgba(13,13,22,0.5) 82%,
      rgba(13,13,22,0.9) 100%) !important;
  }
}

/* ==============================
   巻末コラム（各話）
============================== */
.mt-column {
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 8px 20px 72px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.mt-column-head {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  margin: 40px 0 8px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}
.mt-column-body {
  color: rgba(255,255,255,0.86) !important;
  font-size: 16px !important;
  line-height: 2.0 !important;
  letter-spacing: 0.03em !important;
}
.mt-column-body p {
  margin: 0 0 24px !important;
}

/* コラム見出し（大タイトル） */
.mt-column-title {
  color: #fff !important;
  font-family: 'Noto Serif JP','Hiragino Mincho ProN',serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  margin: 36px 0 32px !important;
  padding-bottom: 22px !important;
  border-bottom: 2px solid #ffd479 !important;
}

/* 強調（センターの大きめセリフ） */
.mt-column-emph {
  color: #ffd479 !important;
  font-family: 'Noto Serif JP','Hiragino Mincho ProN',serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  text-align: center !important;
  margin: 8px 0 28px !important;
}

/* セクション見出し（パターン①〜） */
.mt-column-h {
  color: #fff !important;
  font-family: 'Noto Serif JP','Hiragino Mincho ProN',serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin: 44px 0 20px !important;
  padding: 14px 16px !important;
  background: linear-gradient(90deg, rgba(255,212,121,0.14), rgba(255,212,121,0) 70%) !important;
  border-left: 4px solid #ffd479 !important;
}
.mt-column-h-no {
  display: inline-block !important;
  color: #ffd479 !important;
  font-size: 15px !important;
  letter-spacing: 0.12em !important;
  margin-right: 10px !important;
}
.mt-column-h-plain {
  text-align: center !important;
  background: none !important;
  border-left: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  padding: 18px 16px !important;
  margin-top: 56px !important;
}

/* 引用（業者のセリフ） */
.mt-column-quote {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  margin: 0 0 24px !important;
  padding: 16px 18px !important;
  background: rgba(0,0,0,0.28) !important;
  border-left: 3px solid rgba(255,80,80,0.8) !important;
  border-radius: 0 6px 6px 0 !important;
}

/* 3つの対策 */
.mt-column-points {
  margin: 0 0 32px !important;
  padding: 0 !important;
}
.mt-column-points li {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 18px 0 !important;
  border-bottom: 1px dashed rgba(255,255,255,0.14) !important;
}
.mt-column-points li:first-child {
  border-top: 1px dashed rgba(255,255,255,0.14) !important;
}
.mt-column-point-no {
  flex: 0 0 auto !important;
  color: #ffd479 !important;
  font-family: 'Noto Serif JP',serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.mt-column-point-body {
  flex: 1 1 auto !important;
}
.mt-column-point-body strong {
  display: block !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  margin-bottom: 6px !important;
}
.mt-column-point-body span {
  display: block !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

/* 決め台詞 */
.mt-column-lead {
  color: #fff !important;
  font-family: 'Noto Serif JP','Hiragino Mincho ProN',serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  text-align: center !important;
  letter-spacing: 0.04em !important;
  margin: 48px 0 28px !important;
}

/* コラム末CTA */
.mt-column-cta {
  margin-top: 48px !important;
  padding: 32px 20px 8px !important;
  text-align: center !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.mt-column-cta-lead {
  color: #fff !important;
  font-family: 'Noto Serif JP',serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  margin-bottom: 8px !important;
}
.mt-column-cta-sub {
  color: rgba(255,255,255,0.8) !important;
  font-size: 15px !important;
  margin-bottom: 22px !important;
}
.mt-column-cta strong {
  color: #ffd479 !important;
}

@media screen and (max-width: 600px) {
  .mt-column { padding: 8px 16px 60px !important; }
  .mt-column-body { font-size: 15px !important; line-height: 1.95 !important; }
  .mt-column-title { font-size: 21px !important; }
  .mt-column-emph { font-size: 17px !important; }
  .mt-column-lead { font-size: 19px !important; }
  .mt-column-h { font-size: 18px !important; }
  .mt-column-point-no { font-size: 26px !important; }
}

/* ==============================
   TOPへ戻る導線
============================== */

/* FVタイトルはサイトTOPへのリンク。
   文字をaで包むと background-clip: text の描画が壊れて
   文字の一部が黒く欠けるため、文字はh1に直接置いたまま、
   透明なクリック領域（.mt-fv-title-link）を上に重ねる方式にする。 */
.mt-fv-title {
  position: relative !important;
}
.mt-fv-title-link {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
}

/* 追従ナビの「TOP」。話数と区別して金アクセント */
.mt-nav-item.is-top {
  color: #ffd479 !important;
  border-color: rgba(255,212,121,0.45) !important;
}
.mt-nav-item.is-top:hover {
  color: #0d0d16 !important;
}

/* 最下部の「▲ TOPへ戻る」 */
.mt-backtop {
  text-align: center !important;
  margin: 0 !important;
  padding: 40px 20px 64px !important;
}
.mt-backtop a {
  display: inline-block !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
  padding: 14px 36px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 40px !important;
  transition: all 0.2s !important;
}
.mt-backtop a:hover {
  color: #ffd479 !important;
  border-color: #ffd479 !important;
  opacity: 1 !important;
}

/* ==============================
   相関図（目次の下）
============================== */
.mt-chart {
  padding: 0 16px 72px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.mt-chart-fig {
  max-width: 640px !important;
  margin: 0 auto !important;
}
.mt-chart-fig img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}

/* 最下部「お片づけの窓口 サイトTOPへ」（/manga/ → サイト本体） */
.mt-sitetop {
  text-align: center !important;
  margin: -32px 0 0 !important;
  padding: 0 20px 64px !important;
}
.mt-sitetop a {
  display: inline-block !important;
  color: #ffd479 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  transition: opacity 0.2s !important;
}
.mt-sitetop a:hover {
  opacity: 0.7 !important;
}

/* ==============================
   各話ページ（/2/ など）専用
============================== */
.mt-ep-breadcrumb {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 20px 16px 0 !important;
}
.mt-ep-breadcrumb a {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  transition: color 0.2s !important;
}
.mt-ep-breadcrumb a:hover {
  color: #ffd479 !important;
}

.mt-episode.is-single {
  padding-top: 12px !important;
}

/* 前の話／次の話 */
.mt-ep-pager {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 8px 16px 48px !important;
}
.mt-ep-pager-link {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: #1a1a2e !important;
  min-height: 60px !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.mt-ep-pager-link.is-next {
  text-align: right !important;
  align-items: flex-end !important;
}
a.mt-ep-pager-link:hover {
  border-color: #ffd479 !important;
  background: #20203a !important;
}
.mt-ep-pager-link.is-disabled {
  visibility: hidden !important;
}
.mt-ep-pager-link.is-soon {
  opacity: 0.4 !important;
}
.mt-ep-pager-label {
  color: #ffd479 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.mt-ep-pager-title {
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.mt-ep-pager-toc {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
}
.mt-ep-pager-toc:hover {
  color: #0d0d16 !important;
  background: #ffd479 !important;
  border-color: #ffd479 !important;
}
@media (max-width: 600px) {
  .mt-ep-pager-label { font-size: 10px !important; }
  .mt-ep-pager-title { font-size: 12px !important; }
  .mt-ep-pager-toc { padding: 14px 14px !important; font-size: 0 !important; }
  .mt-ep-pager-toc::after {
    content: "目次" !important;
    font-size: 13px !important;
  }
}