/* =====================================================================
   suiri.manga-next.jp  --  THE ミステリーマンガ  テーマCSS
   コンセプト : 夜の探偵事務所。濃紺〜黒のノワール、細い罫線、深紅のアクセント、象牙色のロゴ帯。
   作成日     : 2026-10-11
   読み込み順 : 共通CSS comic.css の「後」に読む (public/css/theme/suiri.manga-next.jp.css)
   方針       : HTML/Bladeは変更しない。色・枠・角丸・影・文字・余白のみ上書き。
                display/position/overflow は変えない。画像に filter はかけない。
                フォントはシステムフォントのみ(外部読み込みなし)。
   構成       : [0]変数  [1]base [2]header [3]section [4]card [5]list/detail [6]footer  [7]この題材だけの装飾
                ※[0]〜[6]は7サイト共通の骨格。サイトごとに違うのは変数と[7]のみ。
   ===================================================================== */

/* [0] テーマ変数 */
:root{
  --th-dot-w: 16px;
  --th-dot-h: 3px;
  --th-dot-r: 0;
  --th-dot-aw: 34px;
  --th-sp-label: "◆ 事件簿・特集";
  --th-bg: #0d101c;
  --th-texture: repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 0%,rgba(143,26,44,.28),transparent 60%);
  --th-font: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --th-title-font: "Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;
  --th-title-ls: .1em;
  --th-title-weight: 700;
  --th-onbg: #cfd3e4;
  --th-onbg-link: #ff9aa5;
  --th-surface: #161b2e;
  --th-surface-2: #1f2542;
  --th-text: #ebe8e0;
  --th-muted: #aeb3c8;
  --th-line: #3a4264;
  --th-title: #f4efe4;
  --th-link: #ff9aa5;
  --th-price: #ff9d8a;
  --th-focus: #ffd36b;
  --th-primary: #a31d32;
  --th-primary-text: #ffffff;
  --th-primary-edge: #e0505f;
  --th-accent: #d8d4c8;
  --th-accent-text: #0d101c;
  --th-accent-ink: #ff9aa5;
  --th-cta: #a31d32;
  --th-cta-text: #ffffff;
  --th-cta-hover: #c42640;
  --th-cta-border: 1px solid #e0505f;
  --th-login: #e9e4da;
  --th-login-text: #0d101c;
  --th-login-border: 1px solid #e9e4da;
  --th-secondary: #2a3154;
  --th-secondary-text: #ebe8e0;
  --th-secondary-hover: #3a4470;
  --th-head-bg: #e9e4da;
  --th-head-text: #1a1a22;
  --th-head-hover: #9b1c2c;
  --th-head-border: 1px solid #1a1a22;
  --th-head-shadow: 0 3px 0 #a31d32, 0 4px 0 #0d101c;
  --th-head-deco: none;
  --th-head-deco-size: 100% 0;
  --th-nav-bg: #07090f;
  --th-nav-text: #cfcdc5;
  --th-nav-active: #ff8f9c;
  --th-nav-border: 0 solid transparent;
  --th-mnav-bg: #07090f;
  --th-mnav-border: 2px solid #a31d32;
  --th-mnav-text: #a9aec3;
  --th-mnav-active: #ff8f9c;
  --th-chip-bg: #1f2542;
  --th-chip-text: #ebe8e0;
  --th-chip-border: 1px solid #4a5380;
  --th-card-bg: #1b2138;
  --th-card-bg-hover: #232a4a;
  --th-cover-bg: #0d101c;
  --th-free: #1f7a5a;
  --th-free-text: #ffffff;
  --th-rank-bg: #a31d32;
  --th-rank-text: #ffffff;
  --th-badge-bg: #3a4264;
  --th-badge-text: #ffffff;
  --th-b-section: 1px solid #3a4264;
  --th-r-section: 0;
  --th-sh-section: 0 0 0 3px #0d101c, 0 0 0 4px #3a4264;
  --th-section-deco: linear-gradient(90deg,#a31d32 0 64px,#3a4264 64px 100%);
  --th-section-deco-size: 100% 2px;
  --th-section-rule: 1px solid #3a4264;
  --th-bar-w: 3px;
  --th-bar-h: 20px;
  --th-bar-r: 0;
  --th-bar-gap: 12px;
  --th-r-btn: 0;
  --th-r-chip: 0;
  --th-r-card: 0;
  --th-r-cover: 0;
  --th-sh-cta: none;
  --th-sh-card: none;
  --th-sh-card-hover: 0 8px 20px rgba(0,0,0,.6);
  --th-sh-banner: 0 0 0 1px #3a4264, 0 8px 24px rgba(0,0,0,.6);
  --th-b-card: 1px solid #343b5c;
  --th-b-cover: 1px solid #4a5380;
  --th-vol-edge: 3px solid #a31d32;
  --th-footer-bg: #07090f;
  --th-footer-text: #b9bdd0;
  --th-footer-head: #f4efe4;
  --th-footer-line: #2a3154;
  --th-footer-section: #10142a;
  --th-footer-border: 3px double #a31d32;
}

/* ================================================================
   [1] BASE  -- body / 背景テクスチャ / フォーカス
   ================================================================ */
body{background-color:var(--th-bg);color:var(--th-text);font-family:var(--th-font)}
body:before{background:var(--th-texture)}
h1.top-header{color:var(--th-onbg)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--th-focus);outline-offset:2px}

/* ================================================================
   [2] HEADER  -- ロゴ行 / アイコン / 無料登録 / メニュー / 検索
   ================================================================ */
header{background-color:var(--th-head-bg);background-image:var(--th-head-deco);background-repeat:no-repeat;background-position:left bottom;background-size:var(--th-head-deco-size);border-bottom:var(--th-head-border);box-shadow:var(--th-head-shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
.logo{color:var(--th-primary)}
.icon-label,.icon-label .icon-link,.icon-label .search-icon{color:var(--th-head-text)}
.icon-link-vertical,.icon-text{color:var(--th-head-text)}
.icon-link-vertical:hover,.icon-link:hover{color:var(--th-head-hover);background:transparent}
.header-content{height:auto;min-height:56px}
.icon-label .icon-link,.icon-label .search-icon{color:var(--th-head-text)}
.icon-label .icon-link:hover,.icon-label .search-icon:hover{color:var(--th-head-hover);background:transparent}
.search-icon{color:var(--th-head-text)}
.search-container{border-top:1px solid var(--th-line)}
.search-box{background:var(--th-surface-2);color:var(--th-text);border:1px solid var(--th-line);min-height:44px}
.search-box::placeholder{color:var(--th-muted);opacity:1}
.signup-button{background:var(--th-cta);color:var(--th-cta-text);border:var(--th-cta-border);border-radius:var(--th-r-btn);box-shadow:var(--th-sh-cta);min-height:44px;font-weight:700;justify-content:center}
.signup-button:hover{background:var(--th-cta-hover);color:var(--th-cta-text)}
.menu-panel{background:var(--th-surface);color:var(--th-text);border:1px solid var(--th-line);box-shadow:var(--th-sh-card-hover)}
.menu-panel a{color:var(--th-text);min-height:44px}
.menu-panel a:hover{background-color:var(--th-surface-2)}
.signup-btn{padding-top:12px;padding-bottom:12px}
.signup-btn-au{background-color:#b85f00}
.signup-btn-softbank{background-color:#6b6b6b}
.signup-btn-login{color:var(--th-text)!important}
.signup-btn-login:hover{color:var(--th-link)!important}
@media (max-width:767px){
  .header-actions{gap:10px}
  .header-content{padding:6px 8px}
  .signup-button{font-size:11px;padding:6px 8px}
  .menu-panel{border-top:var(--th-head-border)}
}

/* ---- ナビ(新着/無料/完結…) ---- */
.desktop-nav{background:var(--th-nav-bg);border-top:var(--th-nav-border)}
.nav-tab{color:var(--th-nav-text);font-weight:700}
.nav-tab.active,.nav-tab:hover,
.nav-tab#ranking.active,.nav-tab#ranking:hover,
.nav-tab#free.active,.nav-tab#free:hover,
.nav-tab#complete.active,.nav-tab#complete:hover,
.nav-tab#genres.active,.nav-tab#genres:hover,
.nav-tab#now_free.active,.nav-tab#now_free:hover,
.nav-tab#wait_free.active,.nav-tab#wait_free:hover{color:var(--th-nav-active);border-bottom-color:var(--th-nav-active)}

/* ---- スマホ下部ナビ ---- */
.mobile-nav{background:var(--th-mnav-bg);border-top:var(--th-mnav-border)}
.mobile-nav-item{color:var(--th-mnav-text);min-height:48px}
.mobile-nav-item.active{color:var(--th-mnav-active);font-weight:700}
.mobile-nav-item:active{background-color:var(--th-surface-2)}

/* ================================================================
   [3] SECTION  -- 白い箱 / 見出し / もっと見る
   ================================================================ */
.content-section,.page-container>header,.page-container>main{background-color:var(--th-surface);background-image:var(--th-section-deco);background-repeat:no-repeat;background-position:left top;background-size:var(--th-section-deco-size);border:var(--th-b-section);border-radius:var(--th-r-section);box-shadow:var(--th-sh-section);color:var(--th-text)}
.section-header{border-bottom:var(--th-section-rule)}
.section-title{color:var(--th-title);font-family:var(--th-title-font);letter-spacing:var(--th-title-ls);font-weight:var(--th-title-weight)}
.section-title:before,
#yonda .section-title:before,#new .section-title:before,#latest_update .section-title:before,#free .section-title:before,#complete .section-title:before,#shonen .section-title:before,#shoujo .section-title:before,#seinen .section-title:before,#ladies .section-title:before,#bltl .section-title:before,#top-ranking .section-title:before,#special .section-title:before{background:var(--th-bar);width:var(--th-bar-w);height:var(--th-bar-h);border-radius:var(--th-bar-r);margin-right:var(--th-bar-gap)}
.view-more{color:var(--th-link);font-weight:700}
.view-more:hover{color:var(--th-text)}

/* ---- ログイン / 月額会員登録 (トップ) ---- */
.top_btn{padding-top:13px;padding-bottom:13px;border-radius:var(--th-r-btn);font-size:14px;font-weight:700;box-shadow:var(--th-sh-cta)}
.top_register_btn{background:var(--th-cta);border:var(--th-cta-border);color:var(--th-cta-text)}
.top_login_btn{background:var(--th-login);border:var(--th-login-border);color:var(--th-login-text)}
.top_register_btn:hover{background:var(--th-cta-hover)}

/* ---- バナー(owl) : 幅計算は触らず影だけ ---- */
.top-big-banner{box-shadow:var(--th-sh-banner)}

/* ---- ジャンルタブ / カテゴリチップ ---- */
.top-genre-tab{background-color:var(--th-surface-2);border-top:1px solid var(--th-line);border-bottom:1px solid var(--th-line)}
.top-genre-tab ul li a{color:var(--th-link);font-weight:700;display:inline-block;padding:10px 6px}
.top-genre-tab ul li.active{color:var(--th-text);font-weight:700;border-bottom:3px solid var(--th-primary-edge)}
.category-item{background:var(--th-chip-bg);color:var(--th-chip-text);border:var(--th-chip-border);border-radius:var(--th-r-chip);padding:12px 16px;font-weight:700}
.category-item:hover{background:var(--th-primary);color:var(--th-primary-text);border-color:var(--th-primary)}

/* ================================================================
   [4] CARD  -- 作品カード
   ================================================================ */
.manga-card{background:var(--th-card-bg);color:var(--th-text);border:var(--th-b-card);border-radius:var(--th-r-card);box-shadow:var(--th-sh-card)}
.manga-card:hover{background:var(--th-card-bg-hover);box-shadow:var(--th-sh-card-hover)}
.manga-card:active{background-color:var(--th-surface-2)}
.manga-cover-large{background:var(--th-cover-bg);border-radius:var(--th-r-cover);border:var(--th-b-cover)}
.manga-title-card{color:var(--th-text);font-weight:700}
.manga-author-card,.manga-description-card{color:var(--th-muted)}
.manga-update-card{color:var(--th-accent-ink);font-weight:700}
.status-badge,.status-badge.new{background:var(--th-primary);color:var(--th-primary-text)}
.status-badge.free{background:var(--th-free);color:var(--th-free-text)}
.status-badge.update{background:var(--th-accent);color:var(--th-accent-text)}
.scroll-btn{background:var(--th-surface);color:var(--th-text);border:1px solid var(--th-line)}
.scroll-btn:hover{background:var(--th-surface-2)}
.tag{background:var(--th-surface-2);color:var(--th-muted)}
.tag.free{background:var(--th-free);color:var(--th-free-text)}
.tag.hot{background:var(--th-primary);color:var(--th-primary-text)}

/* ================================================================
   [5] LIST / RANKING / DETAIL  -- 一覧・ランキング・作品詳細
   ================================================================ */
.content-section .comic-list-wrapper .page-header{color:var(--th-title)}
.content-section .comic-list-wrapper .comic-list-area ul.comic-list-vertical li{background-color:var(--th-card-bg);border-bottom:1px solid var(--th-line)}
.content-section .comic-list-wrapper .comic-list-area ul.comic-list-vertical li:first-child{border-top:1px solid var(--th-line)}
.content-section .comic-list-wrapper .comic-list-area ul.comic-list-vertical li:hover{background-color:var(--th-surface-2)}
.content-section .comic-list-wrapper .comic-list-area ul.comic-list-vertical li .comic-detail h3{color:var(--th-text)}
.content-section .comic-list-wrapper .comic-list-area ul.comic-list-vertical li .comic-detail p{color:var(--th-muted)}
.content-section .comic-list-wrapper .comic-list-area ul.comic-list-vertical li .genre-text{background-color:var(--th-primary);color:var(--th-primary-text)}
.ranking-detail_r .comic-list-vertical li{background-color:var(--th-card-bg);border:var(--th-b-card);border-radius:var(--th-r-card)}
.ranking-detail_r .comic-media-thumb{background:var(--th-cover-bg)}
.ranking-detail_r .comic-detail>h3{color:var(--th-text)}
.ranking-detail_r .comic-detail p{color:var(--th-muted)}
.ranking-detail_r .ranking-badge.rank-1,.ranking-detail_r .ranking-badge.rank-2,.ranking-detail_r .ranking-badge.rank-3{background:var(--th-rank-bg);color:var(--th-rank-text)}
.ranking-detail_r .ranking-badge:not(.rank-1):not(.rank-2):not(.rank-3){background:var(--th-badge-bg);color:var(--th-badge-text)}
.ranking-day_r .Grid .Grid-cell a{color:var(--th-link)}
.ranking-day_r .Grid .Grid-cell.active a{color:var(--th-text)!important}
.ranking-day_r .Grid .Grid-cell:after{color:var(--th-line)}
main .comic-detail h1{color:var(--th-title);font-family:var(--th-title-font)}
main .comic-detail-list{border-top:1em solid var(--th-surface-2)}
main .comic-detail .comic-info .comic-body .description p{color:var(--th-muted)}
main .comic-detail .comic-info .comic-body .section-title{color:var(--th-title)}
main .comic-detail .comic-info .comic-body .authors strong,main .comic-detail .comic-info .comic-body .genres strong{color:var(--th-muted)}
main .comic-detail .comic-info .comic-body .genres .genre-tag{border:1px solid var(--th-line);border-radius:var(--th-r-chip);background:var(--th-chip-bg)}
main .comic-detail .comic-info .comic-body .genres .genre-tag a{color:var(--th-chip-text)}
main .comic-detail .comic-info .comic-body .genres .genre-tag a:hover{color:var(--th-link)}
.volume-list{border-top:1px solid var(--th-line)}
.volume-list h2{color:var(--th-title);font-family:var(--th-title-font)}
.volume-list li{background:var(--th-card-bg);border-left:var(--th-vol-edge)}
.volume-list li a{color:var(--th-link)}
.volume-list li a:hover{color:var(--th-text)}
.volume-list li span{color:var(--th-price)}
.volume-list li:hover{background:var(--th-surface-2)}

/* ---- パンくず(背景直置き) ---- */
.breadcrumb,.breadcrumb li,.breadcrumb li+li:before,.breadcrumb .active{color:var(--th-onbg)}
.breadcrumb a{color:var(--th-onbg-link)}
.breadcrumb a:hover{color:var(--th-onbg)}
.page-container>header nav,.page-container>header nav span,.page-container>header nav a+span:before{color:var(--th-muted)}
.page-container>header nav a{color:var(--th-link)}
.page-container>header nav a:hover{color:var(--th-text)}

/* ---- 固定ページ本文 ---- */
.page-header{color:var(--th-title);font-family:var(--th-title-font)}
.content_item{color:var(--th-text)}
.content_item .page-header{color:var(--th-title);border-bottom-color:var(--th-primary-edge)}
.content_item h2.c-title-big{color:var(--th-title);border-left-color:var(--th-primary-edge)}
.content_item h3{color:var(--th-text);background-color:var(--th-surface-2)}
.content_item h4{color:var(--th-muted)}
.content_item a{color:var(--th-link)}
.page_dt,.page_dd{color:var(--th-text)}

/* ---- コース/ボタン ---- */
.course-list li{background:var(--th-card-bg);border:var(--th-b-card);color:var(--th-text)}
.course-list li:hover{background:var(--th-surface-2)}
.course-list li .price button,.course-list li .price .price-button button{background:var(--th-cta);color:var(--th-cta-text);padding-top:13px;padding-bottom:13px;border-radius:var(--th-r-btn)}
.course-list li .price button:hover:not([disabled]),.course-list li .price .price-button button:hover{background:var(--th-cta-hover)}
.btn{min-height:44px}
.btn.btn-primary,.button-xlarge.btn-primary{background-color:var(--th-cta);color:var(--th-cta-text);border-radius:var(--th-r-btn)}
.btn.btn-primary:hover{background-color:var(--th-cta-hover)}
.btn.btn-secondary,.button-xlarge{background-color:var(--th-secondary);color:var(--th-secondary-text);border-radius:var(--th-r-btn)}
.btn.btn-secondary:hover,.button-xlarge:hover{background-color:var(--th-secondary-hover);color:var(--th-secondary-text)}

/* ---- FAQ ---- */
.faq-category-title{color:var(--th-title);border-bottom-color:var(--th-primary-edge)}
.faq-item{background:var(--th-card-bg);border-color:var(--th-line)}
.faq-question{color:var(--th-text)}
.faq-question:hover{background-color:var(--th-surface-2)}
.faq-question-text:before{background:var(--th-primary);color:var(--th-primary-text)}
.faq-answer{background:var(--th-surface-2)}
.faq-answer-content{color:var(--th-text)}
.faq-answer-content:before{background:var(--th-accent);color:var(--th-accent-text)}
.faq-answer-content strong{color:var(--th-title)}
.faq-icon{color:var(--th-muted)}
.faq-contact-section{background:var(--th-surface-2)}
.faq-contact-section h2{color:var(--th-title)}
.faq-contact-section p{color:var(--th-muted)}

/* ---- モーダル ---- */
.purchase-modal,.charge-modal{background-color:var(--th-surface);color:var(--th-text)}
.modal-pointlist{background-color:var(--th-surface-2);color:var(--th-text)}
.purchase-modal .purchase-modal-form ul li button{background-color:var(--th-card-bg);color:var(--th-text);border-color:var(--th-line)}
.purchase-modal .purchase-modal-form ul li button:hover{background-color:var(--th-surface-2)}
.charge-modal button{background-color:var(--th-cta);color:var(--th-cta-text);min-height:44px}
.charge-modal button:hover{background-color:var(--th-cta-hover)}

/* ================================================================
   [6] FOOTER
   ================================================================ */
footer{background:var(--th-footer-bg);border-top:var(--th-footer-border);color:var(--th-footer-text)}
.footer-logo{color:var(--th-primary)}
.footer-description{color:var(--th-footer-text)}
.footer-section h3{color:var(--th-footer-head)}
.footer-section a,.footer-section p{color:var(--th-footer-text)}
.footer-section a:hover{color:var(--th-footer-head)}
.footer-bottom{border-top:1px solid var(--th-footer-line);color:var(--th-footer-text)}
@media (max-width:767px){
  .footer-section{background:var(--th-footer-section)}
  .footer-section h3{border-bottom:1px solid var(--th-footer-line)}
}

/* ================================================================
   [5b] INLINE STYLE 対策  -- Bladeのstyle属性(#fff/#eee/#666等)に勝つ所だけ !important
        (作品詳細 / ページネーション / ローディング / 購入モーダル)
   ================================================================ */
.comic-detail-info strong{color:var(--th-muted)!important}
.comic-detail-info span{color:var(--th-text)!important}
.comic-detail-info a{color:var(--th-chip-text)!important;background:var(--th-chip-bg)!important;border:var(--th-chip-border);border-radius:var(--th-r-chip)!important;padding:6px 12px!important;display:inline-block;font-weight:700}
.comic-detail-info a:hover{color:var(--th-link)!important}
.comic-info-buttons .read-first{background-color:var(--th-cta)!important;color:var(--th-cta-text)!important;border:var(--th-cta-border)!important;border-radius:var(--th-r-btn)!important;box-shadow:var(--th-sh-cta);min-height:44px;font-weight:700}
.comic-info-buttons .read-first:hover{background-color:var(--th-cta-hover)!important}
.comic-info-buttons .comic-favorite button{background-color:var(--th-secondary)!important;color:var(--th-secondary-text)!important;border:1px solid var(--th-secondary-hover)!important;border-radius:var(--th-r-btn)!important;min-height:44px;font-weight:700}
.comic-info-buttons .comic-favorite button:hover{background-color:var(--th-secondary-hover)!important}
.description-more-buttons .description-more{color:var(--th-link)!important}
.volume-list li.comic-volume-list{border-bottom:1px solid var(--th-line)!important}
.volume-list .comic-volume-title{color:var(--th-text)}
.pagination li{background-color:var(--th-card-bg)!important;border-color:var(--th-line)!important;border-radius:var(--th-r-chip)!important}
.pagination li a{color:var(--th-link)!important;font-weight:700}
.pagination li.active{background-color:var(--th-primary)!important;border-color:var(--th-primary)!important;color:var(--th-primary-text)!important}
.pagination li.disabled{background-color:var(--th-surface-2)!important;border-color:var(--th-line)!important;color:var(--th-muted)!important}
main [style*="color: #666"],main [style*="color: #999"]{color:var(--th-muted)!important}
main [style*="color: #ff69b4"]{color:var(--th-link)!important}
main [style*="background-color: #f5f5f5"],main [style*="background-color: #f0f8ff"],main [style*="background-color: #fee"],main [style*="background-color: #d1ecf1"],main [style*="background-color: #fff"]{color:#1d1d1d}
[style*="rgba(255,255,255,1)"]{background:var(--th-bg)!important}
[style*="font-size:18px; color:#333"]{color:var(--th-onbg)!important}

/* ---- 購入モーダル(show-purchase-modal で開く) ---- */
.purchase-modal .purchase-modal-form ul li button{box-shadow:inset 0 -3px 0 0 var(--th-line)}
.purchase-modal .purchase-modal-form ul li button.read-now-free,.purchase-modal .purchase-modal-form ul li button.read-point,.purchase-modal .purchase-modal-form ul li button.read-point-free,.purchase-modal .purchase-modal-form ul li button.read-book{background-color:var(--th-cta);color:var(--th-cta-text);border:var(--th-cta-border);font-weight:700;min-height:44px;box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.25)}
.purchase-modal .purchase-modal-form ul li button.read-now-free:hover,.purchase-modal .purchase-modal-form ul li button.read-point:hover,.purchase-modal .purchase-modal-form ul li button.read-point-free:hover,.purchase-modal .purchase-modal-form ul li button.read-book:hover{background-color:var(--th-cta-hover)}
.purchase-modal .purchase-modal-cancel{background-color:var(--th-surface-2);color:var(--th-text);border:1px solid var(--th-line);min-height:44px}
.purchase-modal .purchase-modal-cancel:hover{background-color:var(--th-line)}
.modal-pointlist li:after{border-right-color:var(--th-line)}
.text-ticket,.text-point,.text-coin{color:var(--th-link)}
.purchase-modal .comic-volume-title,.purchase-modal .comic-volume-info{color:var(--th-text)}

/* ---- 一覧ページ内のパンくず(白箱の中) ---- */
.content-section .breadcrumb,.content-section .breadcrumb li,.content-section .breadcrumb li+li:before,.content-section .breadcrumb .active{color:var(--th-muted)}
.content-section .breadcrumb a{color:var(--th-link)}

/* ================================================================
   [5c] 特集バナー  -- トップ大バナーに「特集」の見出し(上)と札(各スライド左上)
        見出しは .top-big-banner の :before(カルーセル本体 .owl-stage-outer の外)、
        札は .item の :after(装飾のみ・pointer-events:none)
   ================================================================ */
.top-big-banner:before{content:var(--th-sp-label);display:block;background-color:var(--th-surface);background-image:var(--th-section-deco);background-repeat:no-repeat;background-position:left top;background-size:var(--th-section-deco-size);color:var(--th-title);font-family:var(--th-title-font);font-weight:var(--th-title-weight);letter-spacing:var(--th-title-ls);font-size:17px;line-height:1.3;padding:14px 16px 8px;border-bottom:var(--th-section-rule);border-radius:var(--th-r-section) var(--th-r-section) 0 0}
.top-big-banner .item{position:relative}
.top-big-banner .item:after{content:"特集";position:absolute;left:6px;top:6px;z-index:3;pointer-events:none;height:24px;line-height:24px;padding:0 10px;font-size:12px;font-weight:900;letter-spacing:.08em;white-space:nowrap;background:var(--th-cta);color:var(--th-cta-text);border:var(--th-cta-border);border-radius:var(--th-r-chip);box-shadow:0 2px 0 rgba(0,0,0,.35);font-family:var(--th-title-font)}
.comic-media-thumb{background:var(--th-cover-bg)}

/* ================================================================
   [5d] 特集バナーの「スライドできる」表示  -- ドット / 左右の矢印
        owl が .owl-dots に disabled を付けて隠しているので、ここだけ !important で表示に戻す
   ================================================================ */
.top-big-banner .owl-dots,.top-big-banner .owl-dots.disabled{display:block!important;position:relative;text-align:center;background:var(--th-surface);padding:4px 0 6px;border-radius:0 0 var(--th-r-section) var(--th-r-section);line-height:0}
.top-big-banner .owl-dot{display:inline-block;width:auto;min-width:24px;min-height:24px;vertical-align:middle}
.top-big-banner .owl-dot span{display:block;width:var(--th-dot-w);height:var(--th-dot-h);margin:7px;background:var(--th-muted);opacity:.55;border-radius:var(--th-dot-r);transition:width .25s,opacity .25s,background-color .25s}
.top-big-banner .owl-dot.active span{width:var(--th-dot-aw);opacity:1;background:var(--th-primary-edge)}
.top-big-banner .owl-dot:focus-visible span{outline:2px solid var(--th-focus);outline-offset:2px}
/* 左右の装飾矢印(スライド本体 .owl-stage-outer の中に絶対配置 = 幅計算に影響しない) */
.top-big-banner .owl-stage-outer:before,.top-big-banner .owl-stage-outer:after{position:absolute;top:50%;z-index:4;width:30px;height:46px;margin-top:-23px;line-height:44px;text-align:center;font-size:30px;font-weight:700;color:#fff;background:rgba(0,0,0,.42);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.top-big-banner .owl-stage-outer:before{content:"\2039";left:0;border-radius:0 var(--th-r-chip) var(--th-r-chip) 0}
.top-big-banner .owl-stage-outer:after{content:"\203A";right:0;border-radius:var(--th-r-chip) 0 0 var(--th-r-chip)}
@media (prefers-reduced-motion:reduce){.top-big-banner .owl-dot span{transition:none}}

/* ================================================================
   [5e] 特集バナーの動き  -- Ken Burns / シャイン / 札の登場  (CSSのみ。reduced-motionでは全停止)
        overflow は .item 側で隠す(owl の幅計算・クリックには触れない)
   ================================================================ */
.top-big-banner .item{overflow:hidden}
.top-big-banner .owl-item.active .item img{animation:th-kenburns 7s ease-in-out infinite alternate}
@keyframes th-kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
.top-big-banner .item:before{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);translate:-120% 0}
.top-big-banner .owl-item.active .item:before{animation:th-shine 5.5s ease-in-out 1.2s infinite}
@keyframes th-shine{0%{translate:-120% 0;opacity:0}6%{opacity:1}30%{translate:230% 0;opacity:1}31%,100%{translate:230% 0;opacity:0}}
.top-big-banner .owl-item.active .item:after{animation:th-tag-in .6s cubic-bezier(.2,1.3,.4,1) .15s backwards}
@keyframes th-tag-in{from{opacity:0;translate:-10px -6px;scale:.6}}
.top-big-banner:before{animation:th-head-in .7s ease-out backwards}
@keyframes th-head-in{from{opacity:0;translate:0 -8px}}
@media (prefers-reduced-motion:reduce){
  .top-big-banner .owl-item.active .item img,.top-big-banner .item:before,.top-big-banner .owl-item.active .item:before,.top-big-banner .owl-item.active .item:after,.top-big-banner:before{animation:none!important}
  .top-big-banner .item:before{display:none}
}

/* ================================================================
   [5f] 看板型タイトルロゴ(トップだけ)  -- ログイン/月額会員登録ボタン群(.top_login_center)の頭に大きく出す
        画像は theme/title/<host>_b.webp (900x450 透過)。幅いっぱい(左右16px)・高さは 2:1 のまま、PCは最大560px(高さ280px)で中央。
        ヘッダーの小ロゴはそのまま。ボタンは折り返して、ヒーローの下に並ぶ。
   ================================================================ */
.top_login_center{flex-wrap:wrap}
.top_login_center:before{content:"";flex:0 0 100%;height:min(calc((100vw - 32px)/2),280px);pointer-events:none;background:url("title/suiri.manga-next.jp_b.webp") center/contain no-repeat,radial-gradient(ellipse 58% 52% at 50% 52%,rgba(255,244,214,.22),transparent 72%)}

/* ================================================================
   [7] FLAVOR  -- THE ミステリーマンガ 専用の装飾
   ================================================================ */
/* 見出し: 細罫 + 深紅の短い下線 */
.section-title{text-transform:none}
.section-title:after{content:"";display:inline-block;width:28px;height:1px;margin-left:12px;vertical-align:middle;background:#e0505f}
.nav-tab{letter-spacing:.14em}
.top_btn,.signup-button{letter-spacing:.1em}
.manga-title-card{letter-spacing:.02em}
/* フッターのロゴは象牙の帯に載せる(黒ロゴが沈まないように) */
.footer-logo{display:inline-block;background:#e9e4da;padding:8px 14px;border-bottom:3px solid #a31d32}
.manga-card:hover{border-color:#e0505f}
.menu-panel{border-top:3px solid #a31d32}

.top-big-banner:before{border-bottom:1px solid #3a4264}
.top-big-banner .item:after{border-radius:0;border:1px solid #e0505f;box-shadow:none;letter-spacing:.2em;font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif}

/* 特集バナーのドット */



/* 動き: スポットライトが画面を行き来する */
.top-big-banner .item:before{left:0;width:100%;opacity:1;translate:0 0;background:radial-gradient(ellipse 26% 90% at 50% 50%,rgba(255,244,214,.30),transparent 100%)}
.top-big-banner .owl-item.active .item:before{animation:th-spot 6s ease-in-out infinite alternate}
@keyframes th-spot{from{translate:-38% 0}to{translate:38% 0}}
@media (prefers-reduced-motion:reduce){.top-big-banner .owl-item.active .item:after{animation:none!important}.top-big-banner .item:before{display:none}}