/* =====================================================================
   shonen.manga-next.jp  --  少年まんが烈伝  テーマCSS
   コンセプト : 赤・黄・青の三原色ポップ。水玉の青空に、白縁のシール風カードと下に厚みのある立体ボタン、リボン見出し＋星マーク。子ども向け雑誌の元気さだけを借りる。
   作成日     : 2026-10-11
   読み込み順 : 共通CSS comic.css の「後」に読む (public/css/theme/shonen.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: 10px;
  --th-dot-h: 10px;
  --th-dot-r: 50%;
  --th-dot-aw: 26px;
  --th-sp-label: "★ いま読みたい！特集";
  --th-bg: #1769d8;
  --th-texture: radial-gradient(circle,#ffffff 0 5px,transparent 6px) 0 0/40px 40px,radial-gradient(circle,rgba(255,255,255,.45) 0 4px,transparent 5px) 20px 20px/40px 40px;
  --th-font: "Hiragino Maru Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --th-title-font: "Hiragino Maru Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --th-title-ls: .05em;
  --th-title-weight: 900;
  --th-onbg: #ffffff;
  --th-onbg-link: #fff27a;
  --th-surface: #ffffff;
  --th-surface-2: #fff3b0;
  --th-text: #1a1a2e;
  --th-muted: #474c63;
  --th-line: #8fb8f2;
  --th-title: #0d47b8;
  --th-link: #0d47b8;
  --th-price: #c4111b;
  --th-focus: #7a1fd0;
  --th-primary: #d8141f;
  --th-primary-text: #ffffff;
  --th-primary-edge: #d8141f;
  --th-accent: #ffd400;
  --th-accent-text: #1a1a2e;
  --th-accent-ink: #0d47b8;
  --th-cta: #d8141f;
  --th-cta-text: #ffffff;
  --th-cta-hover: #b50f19;
  --th-cta-border: 3px solid #ffffff;
  --th-login: #ffd400;
  --th-login-text: #1a1a2e;
  --th-login-border: 3px solid #ffffff;
  --th-secondary: #0d47b8;
  --th-secondary-text: #ffffff;
  --th-secondary-hover: #0a3690;
  --th-head-bg: #fffbe0;
  --th-head-text: #1a1a2e;
  --th-head-hover: #c4111b;
  --th-head-border: 4px solid #d8141f;
  --th-head-shadow: 0 4px 0 #ffd400;
  --th-head-deco: none;
  --th-head-deco-size: 100% 0;
  --th-nav-bg: #0d47b8;
  --th-nav-text: #ffffff;
  --th-nav-active: #ffe14d;
  --th-nav-border: 0 solid transparent;
  --th-mnav-bg: #fffbe0;
  --th-mnav-border: 4px solid #0d47b8;
  --th-mnav-text: #3a3d52;
  --th-mnav-active: #c4111b;
  --th-chip-bg: #ffffff;
  --th-chip-text: #0d47b8;
  --th-chip-border: 3px solid #0d47b8;
  --th-card-bg: #ffffff;
  --th-card-bg-hover: #fff9d6;
  --th-cover-bg: #cfe4ff;
  --th-free: #0b7a38;
  --th-free-text: #ffffff;
  --th-rank-bg: #d8141f;
  --th-rank-text: #ffffff;
  --th-badge-bg: #0d47b8;
  --th-badge-text: #ffffff;
  --th-b-section: 4px solid #ffffff;
  --th-r-section: 24px;
  --th-sh-section: 0 0 0 4px #0a3690, 0 8px 0 4px #08285f;
  --th-section-deco: linear-gradient(90deg,#d8141f 0 33.4%,#ffd400 33.4% 66.7%,#1e6fe0 66.7% 100%);
  --th-section-deco-size: 100% 8px;
  --th-section-rule: 3px dotted #8fb8f2;
  --th-bar-w: 24px;
  --th-bar-h: 24px;
  --th-bar-r: 0;
  --th-bar-gap: 8px;
  --th-r-btn: 16px;
  --th-r-chip: 999px;
  --th-r-card: 18px;
  --th-r-cover: 10px;
  --th-sh-cta: 0 5px 0 #8c0c14;
  --th-sh-card: 0 4px 0 #0a3690;
  --th-sh-card-hover: 0 8px 0 #0a3690;
  --th-sh-banner: 0 0 0 4px #ffffff, 0 0 0 8px #0a3690, 0 10px 0 8px #08285f;
  --th-b-card: 3px solid #0d47b8;
  --th-b-cover: 3px solid #ffd400;
  --th-vol-edge: 8px solid #ffd400;
  --th-footer-bg: #fff3b0;
  --th-footer-text: #2a2a3c;
  --th-footer-head: #0d47b8;
  --th-footer-line: #0d47b8;
  --th-footer-section: #ffffff;
  --th-footer-border: 6px solid #d8141f;
}

/* ================================================================
   [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>_a.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/shonen.manga-next.jp_a.webp") center/contain no-repeat,radial-gradient(ellipse 58% 52% at 50% 52%,rgba(255,255,255,.75),transparent 72%)}

/* ================================================================
   [7] FLAVOR  -- 少年まんが烈伝 専用の装飾
   ================================================================ */
/* 見出し: 赤いリボン(白+濃赤の二重フチ文字) + 黄色い星マーク */
.section-title{color:#fff;background:#d8141f;padding:6px 18px 6px 10px;border-radius:999px;box-shadow:0 4px 0 #8c0c14;text-shadow:2px 0 0 #8c0c14,-2px 0 0 #8c0c14,0 2px 0 #8c0c14,0 -2px 0 #8c0c14,2px 2px 0 #8c0c14,-2px -2px 0 #8c0c14,2px -2px 0 #8c0c14,-2px 2px 0 #8c0c14}
main .comic-detail .comic-info .comic-body .section-title{color:#fff}
.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:#ffd400;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);vertical-align:middle}
.section-header{margin-bottom:8px}
/* ボタン: 下に厚みのある立体(押すと沈む) */
.top_login_btn{box-shadow:0 5px 0 #a88a00}
.signup-button,.top_btn,.btn,.course-list li .price button,.comic-info-buttons .read-first,.comic-info-buttons .comic-favorite button{transition:transform .08s,box-shadow .08s}
.signup-button:active,.top_btn:active{transform:translateY(4px);box-shadow:0 1px 0 #8c0c14}
.top_login_btn:active{box-shadow:0 1px 0 #a88a00}
.comic-info-buttons .comic-favorite button{box-shadow:0 5px 0 #08285f}
.category-item{box-shadow:0 3px 0 #0a3690}
.top-genre-tab ul li.active{border-bottom-color:#d8141f}
/* バッジ: 丸い白縁シール */
.ranking-detail_r .ranking-badge{border:2px solid #fff;box-shadow:0 2px 0 #8c0c14}
.status-badge{border-radius:999px;border:1px solid #fff}
.menu-panel{border:4px solid #0d47b8;border-radius:0 0 16px 16px}
.manga-title-card{font-weight:900}

.top-big-banner:before{background-color:#d8141f;background-image:none;color:#fff;font-size:18px;text-shadow:2px 0 0 #8c0c14,-2px 0 0 #8c0c14,0 2px 0 #8c0c14,0 -2px 0 #8c0c14,2px 2px 0 #8c0c14,-2px -2px 0 #8c0c14,2px -2px 0 #8c0c14,-2px 2px 0 #8c0c14}
.top-big-banner .item:after{background:#ffd400;color:#1a1a2e;border:3px solid #fff;border-radius:999px;box-shadow:0 3px 0 #8c0c14;height:26px;line-height:20px;padding:0 12px}

/* 特集バナーのドット */
.top-big-banner .owl-dot.active span{box-shadow:0 2px 0 #8c0c14}


/* 動き: ポップに弾む札 */
.top-big-banner .owl-item.active .item:after{animation:th-pop .7s cubic-bezier(.3,1.5,.5,1) .15s backwards,th-bounce 2.2s ease-in-out 1.2s infinite}
@keyframes th-pop{0%{opacity:0;scale:0}55%{opacity:1;scale:1.35}78%{scale:.88}100%{scale:1}}
@keyframes th-bounce{0%,100%{translate:0 0}40%{translate:0 -4px}60%{translate:0 0}75%{translate:0 -2px}}
.top-big-banner:before{animation:th-pop .6s cubic-bezier(.3,1.5,.5,1) backwards;transform-origin:left center}
@media (prefers-reduced-motion:reduce){.top-big-banner .owl-item.active .item:after{animation:none!important}.top-big-banner .item:before{display:none}}