@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =====================================================
   デジブックナビ カスタムCSS（案1: DLsite寄り暖色系）
   適用方法: SWELL → 外観 → カスタマイズ → 追加CSS に貼り付け
   または functions.php で wp_enqueue_style して読み込み
   ===================================================== */

:root {
  /* ▼ ブランドカラー */
  --dbn-primary: #FF6B35;          /* メインオレンジ */
  --dbn-primary-dark: #E5552A;     /* オレンジダーク（ホバー用） */
  --dbn-primary-light: #FF8A5C;    /* オレンジライト */
  --dbn-accent: #FF5A8C;           /* アクセントピンク */
  --dbn-gold: #FFB800;             /* ゴールド（プロモ用） */
  --dbn-text: #1A1A1A;
  --dbn-text-sub: #666666;
  --dbn-bg: #FAFAFA;
  --dbn-bg-card: #FFFFFF;
  --dbn-border: #E0E0E0;
  --dbn-success: #4CAF50;          /* 無料・OKバッジ */
  --dbn-danger: #E63946;           /* R18・割引バッジ */
}

/* ============================
   ヘッダー
   ============================ */
.l-header {
  background-color: #FFFFFF !important;
  border-bottom: 3px solid var(--dbn-primary) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.c-headLogo a {
  color: var(--dbn-text) !important;
}

/* (l-header__inner 旧 padding ルール削除、header-v2 で再定義) */

/* ============================
   グローバルナビ
   ============================ */
/* (旧 gnav gradient ルールは header-v2 セクションで上書き) */

/* ============================
   メイン カラー強調
   ============================ */
a {
  color: var(--dbn-primary);
}
a:hover {
  color: var(--dbn-primary-dark);
}

.c-postThumb__cat a,
.p-postList__cat a,
.cat-link {
  background-color: var(--dbn-primary) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 8px;
}

/* ============================
   ボタン
   ============================ */
.swell-block-button > a,
.c-btn,
button.btn,
input[type="submit"] {
  background-color: var(--dbn-primary) !important;
  border-color: var(--dbn-primary) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  transition: all 0.2s;
}

.swell-block-button > a:hover,
.c-btn:hover,
button.btn:hover {
  background-color: var(--dbn-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,107,53,0.3);
}

/* ============================
   記事カード（一覧）
   ============================ */
.p-postList__link,
.c-postThumb,
article.p-postList article {
  border-radius: 8px !important;
  overflow: hidden;
  transition: all 0.25s;
}

.p-postList__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,107,53,0.15);
}

.p-postList__title,
.c-postTitle {
  color: var(--dbn-text) !important;
  font-weight: 700;
}

.p-postList__date {
  color: var(--dbn-text-sub);
}

/* ============================
   カテゴリ別ラベル色分け（任意・後段）
   ============================ */
.cat-bl, [data-cat="bl"] { background-color: #FF5A8C !important; }
.cat-tl, [data-cat="tl"] { background-color: #B53EBC !important; }
.cat-original, [data-cat="original"] { background-color: #FF8C42 !important; }
.cat-fantasy, [data-cat="fantasy"] { background-color: #4A90E2 !important; }
.cat-school, [data-cat="school"] { background-color: #4CAF50 !important; }
.cat-serious, [data-cat="serious"] { background-color: #607D8B !important; }
.cat-womens, [data-cat="womens"] { background-color: #E91E63 !important; }
.cat-otome, [data-cat="otome"] { background-color: #9C27B0 !important; }
.cat-fanwork, [data-cat="fanwork"] { background-color: #FF9800 !important; }
.cat-mature-wife, [data-cat="mature-wife"] { background-color: #795548 !important; }
.cat-adult, [data-cat="adult"] {
  background-color: var(--dbn-danger) !important;
  color: #FFF !important;
}

/* ============================
   見出し
   ============================ */
.entry-content h2,
.post_content h2,
.c-postTitle.u-fz-xl {
  border-left: 6px solid var(--dbn-primary) !important;
  background-color: #FFF5F0 !important;
  padding: 12px 16px !important;
  border-radius: 0 6px 6px 0;
  color: var(--dbn-text) !important;
}

.entry-content h3,
.post_content h3 {
  border-bottom: 2px solid var(--dbn-primary) !important;
  padding-bottom: 6px;
  color: var(--dbn-text);
}

/* ============================
   サイドバー（後段）
   ============================ */
.sidebar .widget__title {
  background: linear-gradient(90deg, var(--dbn-primary) 0%, var(--dbn-primary-light) 100%);
  color: #FFFFFF !important;
  padding: 10px 16px !important;
  border-radius: 6px 6px 0 0 !important;
}

/* ============================
   フッター
   ============================ */
.l-footer {
  background-color: #1A1F3A !important;
  color: #FFFFFF;
}

/* ============================
   バッジ系（汎用）
   ============================ */
.dbn-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: white;
}
.dbn-badge--free { background-color: var(--dbn-success); }
.dbn-badge--sale { background-color: var(--dbn-danger); }
.dbn-badge--new { background-color: var(--dbn-gold); color: var(--dbn-text); }
.dbn-badge--r18 { background-color: var(--dbn-danger); }

/* ============================
   ヒーローセクション（追加用クラス）
   ============================ */
.dbn-hero {
  background: linear-gradient(135deg, var(--dbn-primary) 0%, var(--dbn-accent) 100%);
  color: #FFFFFF;
  padding: 60px 24px;
  text-align: center;
  border-radius: 0 0 20px 20px;
}
.dbn-hero h1 {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 12px;
  color: #FFFFFF !important;
}
.dbn-hero p {
  font-size: 16px;
  opacity: 0.95;
}
.dbn-hero .dbn-cta {
  display: inline-block;
  background: #FFFFFF;
  color: var(--dbn-primary);
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: 900;
  margin-top: 16px;
  text-decoration: none;
}

/* ============================
   検索バー（ヘッダー）
   ============================ */
.l-header__searchBox input[type="search"] {
  border: 2px solid var(--dbn-primary) !important;
  border-radius: 24px !important;
  padding: 8px 16px !important;
}

/* ============================
   モバイル微調整
   ============================ */
@media (max-width: 600px) {
  .dbn-hero { padding: 32px 16px; }
  .dbn-hero h1 { font-size: 22px; }
}

/* =====================================================
   デジブックナビ トップページ専用スタイル
   ===================================================== */

.dbn-front {
  background: var(--dbn-bg, #FAFAFA);
}
.dbn-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.dbn-section {
  padding: 48px 0;
}
.dbn-section + .dbn-section {
  padding-top: 16px;
}
.dbn-secTitle {
  margin: 0 0 24px;
  padding: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #1A1A1A;
  display: flex;
  align-items: baseline;
  gap: 14px;
  position: relative;
  border-bottom: 1px solid #EEE;
}
.dbn-secTitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 3px;
  background: var(--dbn-primary, #FF6B35);
  border-radius: 2px;
}
/* 旧仕様の絵文字スパンが残っていても見えなくする */
.dbn-secTitle .dbn-emoji { display: none; }
.dbn-secTitle small {
  font-size: 12px;
  font-weight: 500;
  color: #888;
  margin-left: auto;
  letter-spacing: 0;
}

/* ========== カード基本 ========== */
.dbn-card {
  background: #FFF;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E0E0E0;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  display: block;
}
.dbn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.18);
}
.dbn-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #F0F0F0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dbn-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dbn-card__placeholder {
  color: rgba(0,0,0,0.3);
  font-size: 12px;
  font-weight: 700;
}
.dbn-card__cat {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 4px;
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
  background: var(--dbn-primary, #FF6B35);
}
.dbn-card__badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 12px;
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
}
.dbn-badge--r18 { background: #E63946; }
.dbn-card__body {
  padding: 12px 14px;
}
.dbn-card__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #1A1A1A;
}
.dbn-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #666;
}
.dbn-card__score { color: #FF6B35; font-weight: 700; }

/* ========== カテゴリ色（背景・ラベル） ========== */
.dbn-cat-bl { background-color: #FF5A8C !important; }
.dbn-cat-tl { background-color: #B53EBC !important; }
.dbn-cat-original { background-color: #FF8C42 !important; }
.dbn-cat-fantasy { background-color: #4A90E2 !important; }
.dbn-cat-school { background-color: #4CAF50 !important; }
.dbn-cat-serious { background-color: #607D8B !important; }
.dbn-cat-womens { background-color: #E91E63 !important; }
.dbn-cat-manga { background-color: #FF6B35 !important; }

/* カテゴリ別 プレースホルダ背景（画像未設定時） */
.dbn-cat-bg-bl       { background: linear-gradient(135deg, #FFD0E5 0%, #FFB0D0 100%); }
.dbn-cat-bg-tl       { background: linear-gradient(135deg, #E8D5F0 0%, #D0B5E0 100%); }
.dbn-cat-bg-original { background: linear-gradient(135deg, #FFE0D0 0%, #FFC080 100%); }
.dbn-cat-bg-fantasy  { background: linear-gradient(135deg, #D5E5F8 0%, #B0CFF0 100%); }
.dbn-cat-bg-school   { background: linear-gradient(135deg, #DAF0D5 0%, #B0E0B5 100%); }
.dbn-cat-bg-serious  { background: linear-gradient(135deg, #DCE3E8 0%, #B5C0CC 100%); }
.dbn-cat-bg-womens   { background: linear-gradient(135deg, #FFD0E0 0%, #F0A0C0 100%); }
.dbn-cat-bg-manga    { background: linear-gradient(135deg, #FFE0CC 0%, #FFC0A0 100%); }

/* ========== ピックアップ ========== */
.dbn-pickup__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}
.dbn-card--big .dbn-card__img { aspect-ratio: 16 / 9; }
.dbn-card--big .dbn-card__title { font-size: 18px; -webkit-line-clamp: 3; }
.dbn-card--big .dbn-card__body { padding: 16px 18px; }

/* ========== ランキング ========== */
.dbn-ranking__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.dbn-ranking__item {
  position: relative;
  background: #FFF;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0;
}
.dbn-ranking__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.dbn-ranking__num {
  flex-shrink: 0;
  align-self: stretch;
  width: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: #FFF;
  background: #BBB;
  z-index: 3;
  letter-spacing: -0.5px;
}
.dbn-ranking__num--1 { background: linear-gradient(135deg, #FFD700 0%, #FFB800 100%); color: #1A1A1A; }
.dbn-ranking__num--2 { background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%); }
.dbn-ranking__num--3 { background: linear-gradient(135deg, #CD7F32 0%, #B86F2E 100%); }
.dbn-ranking__link {
  display: flex;
  gap: 12px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  flex: 1 1 0%;
  min-width: 0;
}
.dbn-ranking__thumb {
  flex: 0 0 100px;
  width: 100px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
}
.dbn-ranking__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dbn-ranking__body {
  flex: 1;
  min-width: 0;
}
.dbn-ranking__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin: 6px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== 新着 ジャンルタブ ========== */
.dbn-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--dbn-primary, #FF6B35);
}
.dbn-tab {
  background: #FFF;
  border: 2px solid #E0E0E0;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dbn-tab:hover { color: var(--dbn-primary, #FF6B35); border-color: var(--dbn-primary, #FF6B35); }
.dbn-tab.is-active {
  background: var(--dbn-primary, #FF6B35);
  border-color: var(--dbn-primary, #FF6B35);
  color: #FFF;
  transform: translateY(0);
}
.dbn-tab__count {
  background: rgba(0,0,0,0.1);
  padding: 0 6px;
  border-radius: 8px;
  font-size: 11px;
}
.dbn-tab.is-active .dbn-tab__count {
  background: rgba(255,255,255,0.3);
  color: #FFF;
}

.dbn-tabpanel {
  display: none;
  animation: dbnFadeIn 0.3s ease;
}
.dbn-tabpanel.is-active { display: block; }
@keyframes dbnFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dbn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dbn-more {
  text-align: center;
  margin-top: 24px;
}
.dbn-more__btn {
  display: inline-block;
  background: var(--dbn-primary, #FF6B35);
  color: #FFF;
  padding: 12px 32px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s;
}
.dbn-more__btn:hover {
  background: var(--dbn-primary-dark, #E5552A);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,107,53,0.3);
}
.dbn-empty {
  text-align: center;
  color: #888;
  padding: 40px 0;
}

/* ========== レスポンシブ ========== */
@media (max-width: 768px) {
  .dbn-pickup__grid { grid-template-columns: 1fr; }
  .dbn-card--big .dbn-card__img { aspect-ratio: 4 / 3; }
  .dbn-ranking__list { grid-template-columns: 1fr; }
  .dbn-grid { grid-template-columns: repeat(2, 1fr); }
  .dbn-secTitle { font-size: 18px; padding: 10px 14px; }
  .dbn-secTitle small { display: none; }
  .dbn-section { padding: 32px 0; }
}
@media (max-width: 480px) {
  .dbn-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   デジブックナビ 改善CSS（v2: 監査改修分）
   ===================================================== */

/* ================================
   P2-4: 上部プロモ帯（黄色 info bar）
   ================================ */
.dbn-promo-bar {
  background: linear-gradient(90deg, #FFB800 0%, #FFC93C 50%, #FFB800 100%);
  color: #1A1A1A;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 6px 16px;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dbn-promo-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.dbn-promo-bar a {
  color: #1A1A1A;
  text-decoration: underline;
  font-weight: 900;
}
.dbn-promo-bar .dbn-promo-bar__emoji {
  font-size: 16px;
}

/* ================================
   P2-3: ヘッダー検索バー大型化
   ================================ */
.l-header__searchBox,
.c-iconBtn--search {
  /* 既存の小さい検索アイコンは非表示にしない（モバイル用に維持） */
}

/* PCでは検索バーを大きく中央配置 */
@media (min-width: 960px) {
  .dbn-header-search {
    position: relative;
    max-width: 480px;
    width: 100%;
    margin: 0 24px;
  }
  .dbn-header-search input[type="search"] {
    width: 100%;
    padding: 11px 50px 11px 18px;
    border: 2px solid #FF6B35;
    border-radius: 30px;
    font-size: 14px;
    background: #FFFFFF;
    transition: all 0.2s;
  }
  .dbn-header-search input[type="search"]:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
  }
  .dbn-header-search button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF6B35;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
  }
  .dbn-header-search button:hover { background: #E5552A; }
  .dbn-header-search button::before {
    content: '🔍';
    font-size: 18px;
    filter: grayscale(1) brightness(0) invert(1);
  }
}

/* ================================
   P2-5: サイドバー再構築（拡張）
   ================================ */
.dbn-side-block {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E0E0E0;
  margin-bottom: 24px;
  overflow: hidden;
}
.dbn-side-block__title {
  background: linear-gradient(90deg, #FF6B35 0%, #FF8A5C 100%);
  color: #FFFFFF;
  padding: 10px 16px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dbn-side-block__title .dbn-emoji { font-size: 16px; }
.dbn-side-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dbn-side-block li {
  border-bottom: 1px solid #F0F0F0;
}
.dbn-side-block li:last-child { border-bottom: none; }
.dbn-side-block li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: 13px;
  color: #1A1A1A;
  text-decoration: none;
  transition: background 0.2s;
}
.dbn-side-block li a:hover {
  background: #FFF5F0;
  color: #FF6B35;
}
.dbn-side-block .dbn-side-block__count {
  background: #FF6B35;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 28px;
  text-align: center;
}

/* ================================
   カテゴリページ v2: クリーン化
   (参考: DLsite / コミックシーモア / pixiv)
   ================================ */
.dbn-cat-header {
  background: none;
  padding: 16px 0 18px;
  border-radius: 0;
  border-left: none;
  border-bottom: 1px solid #ECECEC;
  margin: 0 0 0 0;
  position: relative;
}
.dbn-cat-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 3px;
  background: #FF6B35;
  border-radius: 2px;
}
.dbn-cat-header__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6px;
  flex-wrap: wrap;
}
.dbn-cat-header__name {
  font-size: 28px;
  font-weight: 800;
  color: #1A1A1A;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
.dbn-cat-header__count {
  background: none;
  color: #888;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.dbn-cat-header__count::before {
  content: "全 ";
}
.dbn-cat-header__desc {
  font-size: 13px;
  color: #666;
  margin: 4px 0 0;
  line-height: 1.75;
  max-width: 920px;
}

/* ソートタブ: 下線型 */
.dbn-cat-sort {
  display: flex;
  gap: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid #ECECEC;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.dbn-cat-sort a {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 22px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  color: #888;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  white-space: nowrap;
}
.dbn-cat-sort a:hover {
  color: #FF6B35;
  border-color: transparent;
  background: none;
}
.dbn-cat-sort a.is-active {
  color: #FF6B35;
  border-bottom-color: #FF6B35;
  background: none;
}

@media (max-width: 768px) {
  .dbn-cat-header__name { font-size: 22px; }
  .dbn-cat-header__desc { font-size: 12px; }
  .dbn-cat-sort a { padding: 10px 14px; font-size: 13px; }
}

/* ================================
   P0-2: フッター3カラム
   ================================ */
.dbn-footer {
  background: #1A1F3A;
  color: #FFFFFF;
  padding: 48px 24px 16px;
}
.dbn-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.dbn-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .dbn-footer__grid { grid-template-columns: 1fr; gap: 24px; }
}
.dbn-footer__col h4 {
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #FFB800;
  color: #FFB800;
}
.dbn-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dbn-footer__col li {
  margin-bottom: 8px;
}
.dbn-footer__col a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13px;
  opacity: 0.9;
  transition: opacity 0.2s, color 0.2s;
}
.dbn-footer__col a:hover {
  color: #FFB800;
  opacity: 1;
}
.dbn-footer__about p {
  font-size: 12px;
  line-height: 1.7;
  color: #B0B5C8;
  margin: 0 0 12px;
}
.dbn-footer__logo {
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.dbn-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
  text-align: center;
  font-size: 11px;
  color: #888;
  line-height: 1.7;
}
.dbn-footer__bottom .dbn-footer__r18 {
  display: inline-block;
  background: rgba(230,57,70,0.15);
  color: #FFAFB6;
  padding: 4px 12px;
  border-radius: 12px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
}

/* ================================
   P1-2: SWELL TOC スタイル拡張（オレンジ寄り）
   ================================ */
.swell-toc {
  border: 2px solid #FF6B35 !important;
  background: #FFF5F0 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
}
.p-toc__title,
.swell-toc__title {
  color: #FF6B35 !important;
  font-weight: 900 !important;
}

/* ================================
   P1-3: SWELL 関連記事 タイトル
   ================================ */
.p-relatedPosts__title,
.c-postListWrap__title {
  background: #FFF5F0 !important;
  border-left: 8px solid #FF6B35 !important;
  padding: 12px 16px !important;
  border-radius: 0 8px 8px 0 !important;
}

/* ================================
   ヒーロー上部マージン調整
   ================================ */
.dbn-front .dbn-mv-wrap {
  margin-bottom: 32px;
}

/* ================================
   ヘッダーロゴ周りの空白対策（P2-2）
   ヘッダーをコンパクトに、左右の余白を均等に
   ================================ */
@media (min-width: 960px) {
  .l-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
  }
  .c-headLogo {
    margin-right: auto !important;
  }
}

/* ================================
   既存ピックアップ＋自分のピックアップの間隔調整
   ================================ */
.p-pickupBanners {
  margin-bottom: 16px;
}

/* ================================
   "最近のコメント" 等の空ウィジェット非表示
   ================================ */
.widget_recent_comments .wp-block-latest-comments__no-comments,
.widget_recent_comments:has(.wp-block-latest-comments:empty) {
  display: none !important;
}

/* ====================================================================
   TOPページ 2カラム化 (メイン + サイドバー)
   ==================================================================== */
.dbn-front-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}
.dbn-front-grid__main { min-width: 0; }
.dbn-front-grid__side {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (max-width: 960px) {
  .dbn-front-grid { grid-template-columns: 1fr; gap: 24px; }
  .dbn-front-grid__side { order: 2; }
}

/* サイドバー内検索フォーム */
.dbn-side-block__inner { padding: 14px 16px; }
.dbn-side-search {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.dbn-side-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 2px solid #FF6B35;
  border-radius: 8px;
  font-size: 13px;
  background: #FFF;
}
.dbn-side-search input[type="search"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.15);
}
.dbn-side-search button {
  width: 40px;
  height: 38px;
  background: #FF6B35;
  color: #FFF;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
.dbn-side-search button:hover { background: #E5552A; }

/* サイドバー 評価ランキング */
.dbn-side-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: side-rank;
}
.dbn-side-rank__item { border-bottom: 1px solid #F0F0F0; }
.dbn-side-rank__item:last-child { border-bottom: none; }
.dbn-side-rank__item a {
  display: grid;
  grid-template-columns: 32px 64px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  text-decoration: none;
  color: #1A1A1A;
  transition: background 0.2s;
}
.dbn-side-rank__item a:hover { background: #FFF5F0; }
.dbn-side-rank__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #BBB;
  color: #FFF;
  font-weight: 900;
  font-size: 12px;
}
.dbn-side-rank__num--1 { background: linear-gradient(135deg, #FFD700, #FFA500); }
.dbn-side-rank__num--2 { background: linear-gradient(135deg, #C0C0C0, #8C8C8C); }
.dbn-side-rank__num--3 { background: linear-gradient(135deg, #CD7F32, #8B5A2B); }
.dbn-side-rank__thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  background: #F5F5F5;
}
.dbn-side-rank__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dbn-side-rank__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dbn-side-rank__score {
  font-size: 11px;
  color: #FF6B35;
  font-weight: 700;
}

/* サイドバー 新着レビュー */
.dbn-side-new { list-style: none; margin: 0; padding: 0; }
.dbn-side-new li { border-bottom: 1px solid #F0F0F0; }
.dbn-side-new li:last-child { border-bottom: none; }
.dbn-side-new li a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: #1A1A1A;
  transition: background 0.2s;
}
.dbn-side-new li a:hover { background: #FFF5F0; }
.dbn-side-new__date {
  display: block;
  font-size: 10px;
  color: #999;
  margin-bottom: 2px;
}
.dbn-side-new__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* サイドバー注意書きブロック */
.dbn-side-block--note .dbn-side-block__title {
  background: linear-gradient(90deg, #E63946 0%, #F25C68 100%);
}
.dbn-side-block--note .dbn-side-block__inner p {
  font-size: 11px;
  line-height: 1.6;
  color: #666;
  margin: 0 0 6px;
}
.dbn-side-block--note .dbn-side-block__inner p:last-child { margin-bottom: 0; }
.dbn-side-block--note strong { color: #E63946; }

/* ====================================================================
   TOPページ: SWELL標準サイドバー領域を解除してフル幅化
   ==================================================================== */
body.home .l-content.l-container {
  display: block !important;
  max-width: 1400px !important;
  width: 100%;
  margin: 0 auto;
}
body.home .l-mainContent {
  width: 100% !important;
  max-width: 100% !important;
}
body.home .l-mainContent__inner {
  max-width: 100%;
  width: 100%;
  padding: 0 16px;
}
/* TOPでSWELL標準サイドバーが表示されないようにする */
body.home > .l-content > .l-sidebar,
body.home .l-content > .l-sidebar {
  display: none !important;
}
/* グリッドの最大幅とサイドバー幅を画面に合わせて調整 */
@media (min-width: 1200px) {
  .dbn-front-grid {
    grid-template-columns: 1fr 360px;
    gap: 40px;
  }
}
@media (min-width: 1400px) {
  .dbn-front-grid {
    grid-template-columns: 1fr 380px;
    gap: 48px;
  }
}

/* TOPページのSWELL標準サイドバー領域を解除 (selectors修正版) */
.home .l-content.l-container,
body .home .l-content.l-container {
  display: block !important;
  max-width: 1400px !important;
  width: 100%;
  margin: 0 auto;
}
.home .l-content.l-container > .l-mainContent {
  width: 100% !important;
  max-width: 100% !important;
}
.home .l-content.l-container > .l-sidebar,
.home .l-sidebar {
  display: none !important;
}
.home .l-mainContent__inner {
  max-width: 100% !important;
  padding: 0 24px;
}

/* ウルトラワイド画面でもしっかり画面を使う */
@media (min-width: 1500px) {
  .home .l-content.l-container {
    max-width: 1500px !important;
  }
  .dbn-front-grid {
    grid-template-columns: 1fr 400px;
    gap: 48px;
  }
}
@media (min-width: 1800px) {
  .home .l-content.l-container {
    max-width: 1600px !important;
  }
}

/* ====================================================================
   ヘッダー v2: ロゴ + 中央検索 + 右ナビを綺麗に揃える
   ==================================================================== */
/* ヘッダー全体: 白背景・低めの高さ・薄いシャドウ */
.l-header {
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.l-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px;
  min-height: 80px;
}

/* ロゴ */
.c-headLogo {
  margin: 0 !important;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.c-headLogo a { display: block; }
.c-headLogo img {
  display: block;
  height: 64px !important;
  width: auto !important;
  max-height: 64px !important;
}

/* 中央検索バー */
.dbn-header-search {
  flex: 1 1 auto;
  max-width: 520px;
  position: relative;
  display: flex;
  align-items: center;
}
.dbn-header-search input[type=search] {
  width: 100%;
  height: 44px;
  padding: 0 56px 0 20px;
  border: 2px solid #FF6B35;
  border-radius: 999px;
  font-size: 14px;
  background: #FFF;
  box-sizing: border-box;
  outline: none;
  transition: box-shadow 0.2s;
}
.dbn-header-search input[type=search]:focus {
  box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
}
.dbn-header-search button {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FF6B35;
  border: none;
  color: #FFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
}
.dbn-header-search button:hover { background: #E5552A; }
.dbn-header-search button::before {
  content: '🔍';
  font-size: 14px;
  filter: grayscale(1) brightness(0) invert(1);
}

/* グローバルナビ (右側、横並び・テキストリンク) */
.l-header__gnav,
.c-gnavWrap {
  flex-shrink: 0;
  background: none !important;
  background-image: none !important;
}
.c-gnav {
  display: flex !important;
  align-items: center;
  gap: 4px;
  background: none !important;
  background-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.c-gnav > .menu-item {
  list-style: none;
  position: relative;
}
.c-gnav > .menu-item > a {
  display: flex !important;
  align-items: center;
  height: 44px;
  padding: 0 12px !important;
  color: #1A1A1A !important;
  font-size: 14px;
  font-weight: 700 !important;
  text-decoration: none;
  border-radius: 6px;
  background: transparent !important;
  transition: all 0.15s;
  white-space: nowrap;
}
.c-gnav > .menu-item > a:hover {
  background: #FFF5F0 !important;
  color: #FF6B35 !important;
}
.c-gnav > .menu-item.current-menu-item > a {
  color: #FF6B35 !important;
  position: relative;
}
.c-gnav > .menu-item.current-menu-item > a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: #FF6B35;
}

/* スティッキー時の縮小 */
.l-header.-fixed .l-header__inner,
.l-header.is-fixed .l-header__inner {
  min-height: 64px;
  padding: 4px 24px !important;
}
.l-header.-fixed .c-headLogo img,
.l-header.is-fixed .c-headLogo img {
  height: 48px !important;
  max-height: 48px !important;
}

/* タブレット以下: 検索バーは隠す (SWELL モバイルメニューにある) */
@media (max-width: 959px) {
  .dbn-header-search { display: none; }
  .l-header__inner { padding: 8px 16px !important; min-height: 64px; }
  .c-headLogo img { height: 48px !important; max-height: 48px !important; }
}

/* ====================================================================
   ヘッダー v3: SWELL -series 上書きの仕上げ
   ==================================================================== */
@media (min-width: 960px) {
  /* l-header 全体: 余分な border 除去 */
  .l-header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  /* SWELL の -series 用ロゴラッパ padding を解除 */
  .-series .l-header__inner,
  .l-header__inner {
    align-items: center !important;
    padding: 0 24px !important;
    min-height: 76px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 24px;
    flex-wrap: nowrap !important;
  }
  .-series .l-header__logo,
  .l-header__logo {
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    height: auto !important;
  }
  .-series .c-headLogo,
  .c-headLogo {
    margin: 0 !important;
    max-width: none !important;
    height: 56px;
    display: flex;
    align-items: center;
  }
  .-series .c-headLogo a,
  .c-headLogo a {
    display: flex;
    align-items: center;
    height: 56px;
  }
  .-series .c-headLogo img,
  .c-headLogo img {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
  }

  /* 検索バーが伸びすぎないように */
  .dbn-header-search {
    flex: 1 1 0%;
    max-width: 440px;
    min-width: 220px;
  }

  /* gnav は右寄せ・サイズ抑える */
  .-series-right .c-gnavWrap,
  .l-header__gnav {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    align-self: center;
  }

  /* l-header__bar (上の22pxバー) も低めに */
  .l-header__bar { padding: 0; min-height: 22px; }
}

/* 検索バー: 1400px グリッドでもしっかり伸びるよう調整 */
@media (min-width: 1100px) {
  .dbn-header-search { max-width: 520px !important; }
}
@media (min-width: 1300px) {
  .dbn-header-search { max-width: 580px !important; }
}

/* ====================================================================
   見出し v2: 絵文字を全廃 / サイドバーブロック見出しもクリーン化
   ==================================================================== */
/* どこに残っていても dbn-emoji span は非表示 */
.dbn-emoji { display: none !important; }

/* サイドバーブロック見出し: オレンジグラデ → 白背景 + 左バー */
.dbn-side-block {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.dbn-side-block__title {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1A1A1A !important;
  padding: 12px 16px 12px 18px !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  border-bottom: 1px solid #F0F0F0;
  border-left: 4px solid var(--dbn-primary, #FF6B35);
  display: block !important;
}
/* 注意ブロックは赤系の左バー */
.dbn-side-block--note .dbn-side-block__title {
  border-left-color: #E63946 !important;
}

/* カードカテゴリラベル: 絵文字親要素も非表示にしていたら復帰 (必要なら個別調整) */
.dbn-card__cat, .dbn-card__badge { display: inline-block; }

/* ====================================================================
   ランキング項目内では .dbn-card__cat を絶対配置から外す
   (順位バッジに被るのを防止)
   ==================================================================== */
.dbn-ranking__body .dbn-card__cat {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: inline-block !important;
  margin: 0 0 6px 0 !important;
  padding: 3px 10px !important;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  line-height: 1.3;
}
.dbn-ranking__body {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  min-width: 0;
  flex: 1 1 0%;
}
.dbn-ranking__body .dbn-ranking__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #1A1A1A;
}

/* ====================================================================
   アーカイブグリッド (カテゴリページのカード並べ) - 再追加
   ==================================================================== */
.dbn-archive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 1100px) {
  .dbn-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .dbn-archive-grid { grid-template-columns: 1fr; gap: 12px; }
}
.dbn-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 32px 0;
  flex-wrap: wrap;
}
.dbn-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  color: #1A1A1A;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.2s;
}
.dbn-pagination .page-numbers:hover,
.dbn-pagination .page-numbers.current {
  background: #FF6B35;
  border-color: #FF6B35;
  color: #FFFFFF;
}
.dbn-empty {
  padding: 48px 24px;
  background: #F5F5F5;
  border-radius: 12px;
  text-align: center;
  color: #666;
}

/* ====================================================================
   記事末尾の内部リンク3軸ブロック
   ==================================================================== */
.dbn-related-blocks {
  margin: 48px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.dbn-related-block {
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: 10px;
  padding: 20px 24px 22px;
}
.dbn-related-block__head {
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #F0F0F0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}
.dbn-related-block__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 2px;
  background: #FF6B35;
  border-radius: 1px;
}
.dbn-related-block__title {
  font-size: 17px;
  font-weight: 800;
  color: #1A1A1A;
  letter-spacing: 0.3px;
}
.dbn-related-block__subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #888;
}
.dbn-related-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .dbn-related-block__list { grid-template-columns: 1fr; }
}
.dbn-related-block__item a {
  display: flex;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  border: 1px solid #F5F5F5;
  height: 100%;
}
.dbn-related-block__item a:hover {
  background: #FFF5F0;
  border-color: #FFE0CC;
}
.dbn-related-block__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  background: #F5F5F5;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.dbn-related-block__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dbn-related-block__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 0%;
}
.dbn-related-block__cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 3px;
  width: fit-content;
  line-height: 1.5;
}
.dbn-related-block__post-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: #1A1A1A;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dbn-related-block__score {
  font-size: 11px;
  color: #FF6B35;
  font-weight: 700;
}

/* ====================================================================
   DLsite アフィ CTA ボタン
   ==================================================================== */
.dbn-cta-wrap {
  margin: 28px 0;
  display: flex;
  justify-content: center;
}
.dbn-cta-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 320px;
  max-width: 560px;
  padding: 18px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF8A5C 0%, #FF6B35 70%, #E5552A 100%);
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: center;
}
.dbn-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 107, 53, 0.45);
  color: #FFFFFF !important;
}
.dbn-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(255, 107, 53, 0.4);
}
.dbn-cta-label {
  font-size: 17px;
  line-height: 1.3;
}
.dbn-cta-sub {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.92;
  letter-spacing: 1px;
}

/* セカンダリ: 細枠アウトライン版 */
.dbn-cta-btn.dbn-cta--secondary {
  background: #FFFFFF;
  color: #FF6B35 !important;
  border: 2px solid #FF6B35;
  box-shadow: none;
}
.dbn-cta-btn.dbn-cta--secondary:hover {
  background: #FFF5F0;
  color: #FF6B35 !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
}
.dbn-cta-btn.dbn-cta--secondary .dbn-cta-sub {
  opacity: 0.7;
}

/* バナー型: 横長 */
.dbn-cta-btn.dbn-cta--banner {
  flex-direction: row;
  gap: 16px;
  border-radius: 12px;
  padding: 16px 28px;
}
.dbn-cta-btn.dbn-cta--banner .dbn-cta-sub {
  font-size: 13px;
  border-left: 1px solid rgba(255,255,255,0.4);
  padding-left: 16px;
}

@media (max-width: 600px) {
  .dbn-cta-btn { min-width: 0; width: 100%; padding: 16px 20px; font-size: 16px; }
  .dbn-cta-label { font-size: 16px; }
}

/* ====================================================================
   サイドバー: 人気記事ランキング
   ==================================================================== */
.dbn-side-popular__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dbn-side-popular__item { border-bottom: 1px solid #F0F0F0; }
.dbn-side-popular__item:last-child { border-bottom: none; }
.dbn-side-popular__item a {
  display: grid;
  grid-template-columns: 28px 56px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  text-decoration: none;
  color: #1A1A1A;
  transition: background 0.15s;
}
.dbn-side-popular__item a:hover { background: #FFF5F0; }
.dbn-side-popular__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #BBB;
  color: #FFF;
  font-weight: 900;
  font-size: 11px;
}
.dbn-side-popular__num--1 { background: linear-gradient(135deg, #FFD700, #FFA500); }
.dbn-side-popular__num--2 { background: linear-gradient(135deg, #C0C0C0, #8C8C8C); }
.dbn-side-popular__num--3 { background: linear-gradient(135deg, #CD7F32, #8B5A2B); }
.dbn-side-popular__thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  background: #F5F5F5;
}
.dbn-side-popular__body {
  min-width: 0;
}
.dbn-side-popular__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
 * 関連作品カード（.dbn-related-card）
 * 詳細仕様: デジブックナビ/11_implementation.md §G-3
 * ========================================================= */
.dbn-related-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px;
  margin: 16px 0 8px;
  border: 1px solid #f0d9c8;
  border-radius: 8px;
  background: #fffbf6;
}
.dbn-related-card__thumb {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dbn-related-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 313 / 450;
  object-fit: cover;
}
.dbn-related-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dbn-related-card__title {
  font-size: 1.05em;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  color: #1a1a1a;
}
.dbn-related-card__meta {
  font-size: 0.85em;
  color: #666;
  margin: 0;
  line-height: 1.5;
}
.dbn-related-card__desc {
  font-size: 0.92em;
  margin: 4px 0 0;
  line-height: 1.6;
  color: #333;
}
@media (max-width: 600px) {
  .dbn-related-card {
    grid-template-columns: 90px 1fr;
    gap: 12px;
    padding: 12px;
  }
  .dbn-related-card__title { font-size: 1em; }
  .dbn-related-card__desc { font-size: 0.88em; }
}


/* ========================================================================
 * セール期間ジャック表示システム（Pipe-3 Layer 3-4）
 * 設計書: デジブックナビ/14_sale_display_system.md
 * ======================================================================== */

/* --- InfoBar (ヘッダー細帯) --- */
.dbn-sale-infobar {
  background: #D32F2F;
  color: #FFF;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 16px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.dbn-sale-infobar--final {
  background: #B71C1C;
  animation: dbn-sale-pulse 2.4s ease-in-out infinite;
}
@keyframes dbn-sale-pulse {
  0%, 100% { background: #B71C1C; }
  50% { background: #E53935; }
}
.dbn-sale-infobar__inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #FFF !important;
  text-decoration: none !important;
  flex-wrap: wrap;
  justify-content: center;
}
.dbn-sale-infobar__inner:hover {
  text-decoration: underline !important;
  color: #FFF !important;
}
.dbn-sale-infobar__icon { font-size: 18px; }
.dbn-sale-infobar__rate {
  background: rgba(255,255,255,0.2);
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 700;
  margin-left: 8px;
  font-size: 12px;
}
.dbn-sale-infobar__remaining {
  background: #FFF;
  color: #D32F2F;
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12px;
}
.dbn-sale-infobar__pr {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 4px;
}
@media (max-width: 600px) {
  .dbn-sale-infobar { font-size: 12px; padding: 6px 8px; }
  .dbn-sale-infobar__inner { gap: 6px; }
  .dbn-sale-infobar__rate, .dbn-sale-infobar__remaining { font-size: 11px; padding: 1px 8px; }
}

/* --- SPフローティングCTA --- */
.dbn-sale-floating {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 8px;
  background: rgba(0,0,0,0.04);
  display: none;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .dbn-sale-floating { display: block; }
  body { padding-bottom: 64px; }
}
.dbn-sale-floating__btn {
  display: block;
  background: #FF6B35;
  color: #FFF !important;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-size: 14px;
}
.dbn-sale-floating__btn:hover { background: #E55A2B; color: #FFF !important; }
.dbn-sale-floating__pr {
  display: block;
  font-size: 10px;
  opacity: 0.8;
  margin-top: 2px;
}

/* --- サイドバー枠 --- */
.dbn-sale-sidebar {
  background: #FFF8F2;
  border: 1px solid #FFD4B8;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
}
.dbn-sale-sidebar__title {
  color: #D32F2F;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}
.dbn-sale-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dbn-sale-sidebar__item {
  border-bottom: 1px solid #FFD4B8;
  padding: 8px 0;
}
.dbn-sale-sidebar__item:last-child { border-bottom: none; }
.dbn-sale-sidebar__item.is-final .dbn-sale-sidebar__remaining {
  color: #D32F2F;
  font-weight: 700;
}
.dbn-sale-sidebar__item a {
  display: block;
  color: #1A1A1A !important;
  text-decoration: none !important;
}
.dbn-sale-sidebar__item a:hover { background: rgba(255,107,53,0.08); }
.dbn-sale-sidebar__label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}
.dbn-sale-sidebar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dbn-sale-sidebar__rate {
  background: #D32F2F;
  color: #FFF;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.dbn-sale-sidebar__remaining { font-size: 11px; color: #666; }
.dbn-sale-sidebar__pr {
  font-size: 10px;
  color: #999;
  margin: 4px 0 0;
  text-align: right;
}

/* --- 個別記事の動的アラート --- */
.dbn-sale-inline-alert {
  background: #FFF3F0;
  border-left: 4px solid #D32F2F;
  padding: 12px 16px;
  margin: 0 0 20px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.dbn-sale-inline-alert strong { color: #D32F2F; }
.dbn-sale-inline-alert small {
  display: block;
  color: #666;
  font-size: 11px;
  margin-top: 6px;
}


/* --- TOPページ メインビジュアル直下のセールバナー --- */
.dbn-sale-banner {
  margin: 20px auto;
  padding: 16px;
  max-width: 1100px;
  background: linear-gradient(135deg, #FFF3F0 0%, #FFE8E0 100%);
  border: 1px solid #FFCCBC;
  border-radius: 12px;
}
.dbn-sale-banner__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.dbn-sale-banner__title {
  margin: 0;
  color: #D32F2F;
  font-size: 18px;
  font-weight: 700;
}
.dbn-sale-banner__pr {
  font-size: 11px;
  color: #888;
}
.dbn-sale-banner__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.dbn-sale-banner__card {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 6px;
  padding: 16px;
  background: #FFF;
  border: 1px solid #FFCCBC;
  border-radius: 10px;
  text-decoration: none !important;
  color: #1A1A1A !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dbn-sale-banner__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(211,47,47,0.18);
  color: #1A1A1A !important;
}
.dbn-sale-banner__card.is-final {
  border-color: #D32F2F;
  background: #FFEBEE;
}
.dbn-sale-banner__floor {
  font-size: 13px;
  font-weight: 700;
  color: #555;
}
.dbn-sale-banner__rate {
  display: inline-block;
  align-self: flex-start;
  background: #D32F2F;
  color: #FFF;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.dbn-sale-banner__count {
  font-size: 12px;
  color: #777;
}
.dbn-sale-banner__remaining {
  font-size: 13px;
  color: #D32F2F;
  font-weight: 700;
}
.dbn-sale-banner__card.is-final .dbn-sale-banner__remaining::before {
  content: "⚠️ ";
}
.dbn-sale-banner__cta {
  margin-top: 4px;
  font-size: 13px;
  color: #FF6B35;
  font-weight: 700;
}
@media (max-width: 600px) {
  .dbn-sale-banner { padding: 12px; margin: 12px 8px; }
  .dbn-sale-banner__title { font-size: 16px; }
  .dbn-sale-banner__rate { font-size: 16px; }
}


/* --- 販売停止+スワップ表示 (Pipe-5 拡張 Phase 7-B) --- */
.dbn-maintain-alert--swapped {
  background: #FFF8E1;
  border-left: 4px solid #FFA000;
  padding: 12px 16px;
  margin: 0 0 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.dbn-maintain-alert--swapped strong {
  color: #E65100;
}
.dbn-swap-cta {
  display: inline-block;
  background: #FF6B35;
  color: #FFF !important;
  padding: 10px 18px;
  margin: 4px 0 16px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none !important;
  font-size: 14px;
}
.dbn-swap-cta:hover { background: #E55A2B; color: #FFF !important; }
.dbn-maintain-alert--stopped {
  background: #FFEBEE;
  border-left: 4px solid #D32F2F;
  padding: 12px 16px;
  margin: 0 0 12px;
  border-radius: 4px;
}
.dbn-maintain-alert--sale {
  background: #FFF3F0;
  border-left: 4px solid #FF6B35;
  padding: 12px 16px;
  margin: 0 0 12px;
  border-radius: 4px;
}