/* =====================================================================
   spoman.manga-joyful.jp  --  熱血!スポーツまんが  テーマCSS
   コンセプト : ロイヤルブルー×オレンジ。斜めカットのスピード感ある見出しと斜めストライプのスタジアム。
   作成日     : 2026-10-11
   読み込み順 : 共通CSS comic.css の「後」に読む (public/css/theme/spoman.manga-joyful.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: 8px;
  --th-dot-r: 2px;
  --th-dot-aw: 30px;
  --th-sp-label: "▶ 熱戦！特集";
  --th-bg: #dfe9ff;
  --th-texture: repeating-linear-gradient(115deg,rgba(11,63,174,.07) 0 16px,rgba(255,255,255,.35) 16px 32px);
  --th-font: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --th-title-font: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --th-title-ls: .02em;
  --th-title-weight: 900;
  --th-onbg: #14213d;
  --th-onbg-link: #0b3fae;
  --th-surface: #ffffff;
  --th-surface-2: #e6eeff;
  --th-text: #14213d;
  --th-muted: #44506b;
  --th-line: #9db6ea;
  --th-title: #0b2f86;
  --th-link: #0b3fae;
  --th-price: #c0392b;
  --th-focus: #d84a00;
  --th-primary: #0b3fae;
  --th-primary-text: #ffffff;
  --th-primary-edge: #ff7a1a;
  --th-accent: #ff7a1a;
  --th-accent-text: #14213d;
  --th-accent-ink: #a83c00;
  --th-cta: #c63f00;
  --th-cta-text: #ffffff;
  --th-cta-hover: #9c3000;
  --th-cta-border: 2px solid #7a2600;
  --th-login: #0b3fae;
  --th-login-text: #ffffff;
  --th-login-border: 2px solid #062a78;
  --th-secondary: #0b3fae;
  --th-secondary-text: #ffffff;
  --th-secondary-hover: #062a78;
  --th-head-bg: #ffffff;
  --th-head-text: #14213d;
  --th-head-hover: #0b3fae;
  --th-head-border: 0 solid transparent;
  --th-head-shadow: 0 3px 10px rgba(11,63,174,.25);
  --th-head-deco: linear-gradient(110deg,#ff7a1a 0 120px,#0b3fae 120px 100%);
  --th-head-deco-size: 100% 5px;
  --th-nav-bg: #0b3fae;
  --th-nav-text: #ffffff;
  --th-nav-active: #ffb067;
  --th-nav-border: 0 solid transparent;
  --th-mnav-bg: #0b3fae;
  --th-mnav-border: 3px solid #ff7a1a;
  --th-mnav-text: #cfdcff;
  --th-mnav-active: #ffb067;
  --th-chip-bg: #ffffff;
  --th-chip-text: #0b3fae;
  --th-chip-border: 2px solid #0b3fae;
  --th-card-bg: #ffffff;
  --th-card-bg-hover: #f0f5ff;
  --th-cover-bg: #cdddff;
  --th-free: #13794a;
  --th-free-text: #ffffff;
  --th-rank-bg: #c63f00;
  --th-rank-text: #ffffff;
  --th-badge-bg: #0b3fae;
  --th-badge-text: #ffffff;
  --th-b-section: 0 solid transparent;
  --th-r-section: 4px;
  --th-sh-section: 0 3px 10px rgba(11,63,174,.2);
  --th-section-deco: linear-gradient(110deg,#ff7a1a 0 90px,#0b3fae 90px 100%);
  --th-section-deco-size: 100% 6px;
  --th-section-rule: 2px solid #cfdcff;
  --th-bar-w: 16px;
  --th-bar-h: 22px;
  --th-bar-r: 0;
  --th-bar-gap: 10px;
  --th-r-btn: 6px;
  --th-r-chip: 20px;
  --th-r-card: 6px;
  --th-r-cover: 3px;
  --th-sh-cta: 0 4px 0 #7a2600;
  --th-sh-card: 0 2px 6px rgba(11,63,174,.2);
  --th-sh-card-hover: 0 8px 20px rgba(11,63,174,.35);
  --th-sh-banner: 0 0 0 3px #0b3fae, 0 6px 0 3px #ff7a1a;
  --th-b-card: 2px solid #0b3fae;
  --th-b-cover: 0 solid transparent;
  --th-vol-edge: 6px solid #ff7a1a;
  --th-footer-bg: #cfdcff;
  --th-footer-text: #27365c;
  --th-footer-head: #0b2f86;
  --th-footer-line: #0b3fae;
  --th-footer-section: #e6eeff;
  --th-footer-border: 6px solid #ff7a1a;
}

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

/* ================================================================
   [7] FLAVOR  -- 熱血!スポーツまんが 専用の装飾
   ================================================================ */
/* 見出し: 斜めカットのオレンジ矢羽 */
.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:linear-gradient(110deg,#ff7a1a 0 60%,#0b3fae 60% 100%);clip-path:polygon(35% 0,100% 0,65% 100%,0 100%)}
.section-title{font-style:italic}
.signup-button,.top_btn{transform:skewX(-8deg)}
.signup-button:hover,.top_btn:hover{transform:skewX(-8deg) translateY(-2px)}
.signup-button:active,.top_btn:active{box-shadow:0 1px 0 #7a2600;transform:skewX(-8deg) translateY(3px)}
.manga-card{border-width:0 0 4px 0;border-bottom-color:#ff7a1a}
.ranking-detail_r .ranking-badge{border-radius:4px;transform:skewX(-8deg)}

.top-big-banner:before{font-style:italic}
.top-big-banner .item:after{transform:skewX(-10deg);border-radius:3px;box-shadow:0 3px 0 #7a2600;font-style:italic}

/* 特集バナーのドット */
.top-big-banner .owl-dot span{transform:skewX(-20deg)}


/* 動き: スピード線が駆け抜ける */
.top-big-banner .item:before{width:70%;background:repeating-linear-gradient(100deg,transparent 0 10px,rgba(255,255,255,.34) 10px 12px,transparent 12px 22px)}
.top-big-banner .owl-item.active .item:before{animation:th-speed 3.6s linear 1s infinite}
@keyframes th-speed{0%{translate:-110% 0;opacity:0}4%{opacity:1}22%{translate:150% 0;opacity:1}23%,100%{translate:150% 0;opacity:0}}
@media (prefers-reduced-motion:reduce){.top-big-banner .owl-item.active .item:after{animation:none!important}.top-big-banner .item:before{display:none}}