/*
Theme Name:   SWELL Child
Theme URI:    https://jinbei-invest.com
Description:  SWELL の子テーマ
Author:       jinbei-invest
Template:     swell
Version:      1.0.0
Text Domain:  swell-child
*/

/* ==========================================================================
   SWELL CSSカスタムプロパティ上書き（テーマ全体の色設定）
   ========================================================================== */
:root {
  --color_main:        #4A90B8;
  --color_header_bg:   #1A3A5C;
  --color_header_text: #ffffff;
  --color_footer_bg:   #1A3A5C;
  --color_footer_text: #dddddd;
  --color_htag:        #4A90B8;
  --color_link:        #4A90B8;
  --color_text:        #222222;
  --color_bg:          #FAFAFA;

  /* 独自変数 */
  --jb-main:    #4A90B8;
  --jb-accent:  #1A3A5C;
  --jb-cta:     #FF8C00;
  --jb-border:  #E0E5EB;
  --jb-radius:  10px;
  --jb-shadow:  0 2px 8px rgba(0,0,0,0.05);
}

/* ==========================================================================
   ベース
   ========================================================================== */
body {
  background-color: var(--color_bg);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", YuGothic, sans-serif;
}

a {
  color: var(--jb-main);
}
a:hover {
  color: var(--jb-accent);
}

/* ==========================================================================
   ヘッダーロゴ
   ========================================================================== */

/* ロゴ画像：縦横比維持・最大サイズ制限 */
.l-header__logo img,
.c-headLogo__img,
.c-logo img,
.site-logo img,
header .custom-logo {
  width: auto !important;
  max-width: 280px !important;
  max-height: 70px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* ロゴコンテナ：中央配置 */
.l-header__logo,
.c-headLogo,
.c-logo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* ロゴリンクも中央配置 */
.c-headLogo__link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.l-header,
.l-header__inner,
header {
  background-color: #5BC0EB !important;
}

.l-header {
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

/* ヘッダーバー（上部帯）*/
.l-header__bar {
  background: var(--jb-accent) !important;
  color: #fff !important;
}

/* サイト名 */
.c-headLogo__sitename,
.c-headLogo__sitename a,
.l-header .c-headLogo a {
  color: #fff !important;
}
.c-headLogo__sitename {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}

/* ナビゲーションテキスト（PC） */
.l-header .c-gnav > li > a {
  color: rgba(255,255,255,0.9) !important;
}

/* ハンバーガーアイコン */
.c-hamburger__line,
.c-hamburger__line::before,
.c-hamburger__line::after {
  background-color: #fff !important;
}

/* 固定ヘッダー */
.l-fixHeader {
  background-color: var(--jb-accent) !important;
}
.l-fixHeader__inner {
  color: #fff !important;
}

/* ==========================================================================
   カテゴリーバッジ（c-postThumb__cat）
   ========================================================================== */
.c-postThumb__cat {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  background-image: none !important;  /* SWELLのデフォルトストライプ除去 */
  background-color: var(--jb-main) !important;
  color: #fff !important;
}

/* 仮想通貨・暗号資産 cat-id=1 — ゴールド */
.c-postThumb__cat[data-cat-id="1"] {
  background-color: #F39C12 !important;
}
/* 株式 cat-id=11 — グリーン */
.c-postThumb__cat[data-cat-id="11"] {
  background-color: #27AE60 !important;
}
/* 日経平均 cat-id=12 — ブルー */
.c-postThumb__cat[data-cat-id="12"] {
  background-color: #4A90B8 !important;
}
/* 為替・FX cat-id=13 — パープル */
.c-postThumb__cat[data-cat-id="13"] {
  background-color: #8E44AD !important;
}
/* 経済 cat-id=14 — オレンジ */
.c-postThumb__cat[data-cat-id="14"] {
  background-color: #E67E22 !important;
}
/* 相場考察 cat-id=5 — ダークネイビー */
.c-postThumb__cat[data-cat-id="5"] {
  background-color: #2C3E50 !important;
}

/* ==========================================================================
   記事カードリスト（スマホ）
   ========================================================================== */
@media (max-width: 767px) {

  /* ─── スライダーをグリッド化 ─── */
  .p-postList.swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 0 !important;
  }

  /* スライダーの矢印・ページネーション非表示 */
  .swiper-button-next,
  .swiper-button-prev,
  .swiper-pagination {
    display: none !important;
  }

  /* ─── 各カードアイテム ─── */
  .p-postList__item {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
    flex-shrink: 0;
  }

  /* ─── カードリンク：横並びレイアウト ─── */
  .p-postList__link {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    background: #fff !important;
    border-radius: var(--jb-radius) !important;
    box-shadow: var(--jb-shadow) !important;
    border: 1px solid var(--jb-border) !important;
    padding: 10px !important;
    overflow: hidden;
    text-decoration: none !important;
  }

  /* ─── サムネイル：左固定幅 ─── */
  .p-postList__thumb {
    flex: 0 0 100px !important;
    width: 100px !important;
    height: 72px !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  .p-postList__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* noimg（画像なし）の場合もサイズ維持 */
  .p-postList__thumb.noimg_ {
    background-color: #dde4eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ─── 本文エリア ─── */
  .p-postList__body {
    flex: 1 !important;
    padding: 0 !important;
    min-width: 0;
  }

  /* ─── タイトル ─── */
  .p-postList__title {
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ─── メタ情報（日付など）─── */
  .p-postList__meta {
    font-size: 10px !important;
    color: #888 !important;
    margin-top: 4px !important;
  }

}

/* ==========================================================================
   記事カードリスト（タブレット〜PC）
   ========================================================================== */
@media (min-width: 768px) {

  .p-postList.swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    transform: none !important;
    gap: 16px !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .swiper-button-next,
  .swiper-button-prev,
  .swiper-pagination {
    display: none !important;
  }

  .p-postList__item {
    width: calc(50% - 8px) !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .p-postList__link {
    background: #fff !important;
    border-radius: var(--jb-radius) !important;
    box-shadow: var(--jb-shadow) !important;
    border: 1px solid var(--jb-border) !important;
    display: block !important;
    text-decoration: none !important;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
  }

  .p-postList__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  }

  .p-postList__thumb {
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
  }

  .p-postList__thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }

  .p-postList__body {
    padding: 12px 14px !important;
  }

  .p-postList__title {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    color: #333 !important;
  }
}

@media (min-width: 1100px) {
  .p-postList__item {
    width: calc(33.333% - 11px) !important;
  }
}

/* ==========================================================================
   記事本文：見出し上書き
   ========================================================================== */

/* H2 — 左ボーダー + 薄い背景（SWELLデフォルト=塗り潰しを変更） */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  background: linear-gradient(135deg, #EBF4FB 0%, #F5F9FD 100%) !important;
  color: var(--jb-accent) !important;
  border-left: 5px solid var(--jb-main) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 12px 16px 12px 20px !important;
  border-radius: 0 6px 6px 0 !important;
  margin: 2em 0 1em !important;
  font-size: 1.15rem !important;
}

/* H2の::before（SWELLが追加するボーダー）を非表示 */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
  display: none !important;
}

/* H3 */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  border-left: 4px solid var(--jb-main) !important;
  border-bottom: 1px solid var(--jb-border) !important;
  padding: 8px 12px 8px 16px !important;
  color: var(--jb-accent) !important;
  font-size: 1.05rem !important;
  margin: 1.6em 0 0.8em !important;
}

/* H3のデフォルト下線グラデを非表示 */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
  display: none !important;
}

/* H4 */
.post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  border-left: 3px solid var(--jb-main) !important;
  color: var(--jb-accent) !important;
  padding: 4px 0 4px 14px !important;
  font-size: 1rem !important;
}

/* 本文テキスト */
.post_content p {
  line-height: 1.85;
  margin-bottom: 1.2em;
}

/* ==========================================================================
   CTAボタン
   ========================================================================== */
.wp-block-button .wp-block-button__link,
.swell-block-button a,
.c-btn {
  background-color: var(--jb-cta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  box-shadow: 0 3px 8px rgba(255,107,53,0.35) !important;
  transition: background-color 0.2s, transform 0.15s !important;
}

.wp-block-button .wp-block-button__link:hover,
.swell-block-button a:hover,
.c-btn:hover {
  background-color: #FF7000 !important;
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .wp-block-button .wp-block-button__link,
  .swell-block-button a {
    width: 100% !important;
    text-align: center !important;
    font-size: 1rem !important;
    padding: 16px 20px !important;
  }
}

/* ==========================================================================
   レイアウト（スマホ）
   ========================================================================== */
@media (max-width: 767px) {
  .l-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .l-mainContent {
    width: 100% !important;
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   サイドバーウィジェット
   ========================================================================== */
.l-sidebar .widget {
  background: #fff;
  border-radius: var(--jb-radius);
  box-shadow: var(--jb-shadow);
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--jb-border);
}

/* ウィジェットタイトル */
.c-widget__title.-side {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--jb-accent) !important;
}

.c-widget__title.-side::before {
  background: var(--jb-main) !important;
}

/* ==========================================================================
   ページネーション
   ========================================================================== */
[class*="page-numbers"] {
  border-radius: 6px !important;
  color: #555 !important;
  background-color: #fff !important;
  border: 1px solid var(--jb-border) !important;
}

[class*="page-numbers"]:hover,
span.current.page-numbers {
  background-color: var(--jb-main) !important;
  color: #fff !important;
  border-color: var(--jb-main) !important;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.l-footer {
  background-color: var(--jb-accent) !important;
  color: rgba(255,255,255,0.85) !important;
}

.l-footer a {
  color: rgba(255,255,255,0.75) !important;
}
.l-footer a:hover {
  color: #fff !important;
}

.l-footer__copy,
.l-footer__copyInner {
  color: rgba(255,255,255,0.5) !important;
  font-size: 11px !important;
}

/* フッターウィジェットタイトル */
.c-widget__title.-footer::before {
  background: var(--jb-main) !important;
}

/* ==========================================================================
   TOC（目次）
   ========================================================================== */
.toc {
  background: var(--color_bg);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  padding: 16px 20px;
  margin: 1.5em 0;
}

/* ==========================================================================
   タグ
   ========================================================================== */
.c-tag {
  border: 1px solid var(--jb-main) !important;
  color: var(--jb-main) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  padding: 2px 10px !important;
  transition: background-color 0.15s;
}
.c-tag:hover {
  background-color: var(--jb-main) !important;
  color: #fff !important;
}

/* ==========================================================================
   スマホ全体の微調整
   ========================================================================== */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

/* ==========================================================================
   プロフィールボックス（サイドバー先頭）
   ========================================================================== */
.jb-profile-box {
  background: linear-gradient(135deg, #d6eef8 0%, #eaf6fb 100%);
  border: 1px solid #a8d8f0;
  border-radius: 12px;
  padding: 18px 16px 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(74, 144, 184, 0.12);
}

/* ── 2キャラ横並び ── */
.jb-profile-characters {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

/* ── 各キャラクター ── */
.jb-profile-chara {
  flex: 1;
  text-align: center;
}

.jb-profile-chara img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #a8d8f0;
  display: block;
  margin-bottom: 6px;
}

.jb-profile-chara__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--jb-accent);
  margin: 0 0 4px;
}

.jb-profile-chara__desc {
  font-size: 11px;
  color: #555;
  line-height: 1.55;
  margin: 0;
  text-align: left;
}

/* ── X動線エリア ── */
.jb-profile-x {
  text-align: center;
  border-top: 1px dashed #a8d8f0;
  padding-top: 12px;
}

.jb-profile-x__text {
  font-size: 12px;
  font-weight: 700;
  color: var(--jb-accent);
  margin: 0 0 8px;
}

.jb-profile-x__btn {
  display: block;
  background-color: #000;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none !important;
  letter-spacing: 0.03em;
  transition: background-color 0.2s, transform 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.jb-profile-x__btn:hover {
  background-color: #222 !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ── スマホ：キャラ縦並び ── */
@media (max-width: 599px) {
  .jb-profile-characters {
    flex-direction: column;
    gap: 16px;
  }

  .jb-profile-chara img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 6px;
  }
}

/* ==========================================================================
   トップページ — フロントページレイアウト
   ========================================================================== */

/* SWELL デフォルト「記事スライダー」を非表示（独自スライドを使うため） */
#post_slider,
.p-postSlider {
  display: none !important;
}

/* ボディ部 */
.jb-fp-body {
  padding: 0 16px;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .jb-fp-body {
    padding: 0 24px;
  }
}

/* --------------------------------------------------------------------------
   セクションヘッダー共通
   -------------------------------------------------------------------------- */
.jb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--jb-border);
}

.jb-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--jb-accent);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jb-section-title__badge {
  display: none !important;
}

.jb-section-more {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--jb-main);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--jb-main);
  border-radius: 20px;
  transition: background 0.15s, color 0.15s;
}

.jb-section-more:hover {
  background: var(--jb-main);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   ② 新着記事スライド（縮小表示）
   -------------------------------------------------------------------------- */
.jb-new {
  max-height: 180px !important;
  overflow: hidden !important;
}
.jb-new .swiper-slide {
  max-height: 180px !important;
}
.jb-new .swiper-slide img {
  max-height: 180px !important;
  width: 100% !important;
  object-fit: cover !important;
}
.jb-new .swiper-container {
  max-height: 180px !important;
}

.jb-new__outer {
  overflow: hidden;
}

.jb-new__slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  /* スクロールバー非表示 */
  scrollbar-width: none;
}
.jb-new__slider::-webkit-scrollbar {
  display: none;
}

.jb-new__card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  text-decoration: none !important;
  display: block;
  background: #fff;
  border-radius: var(--jb-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid var(--jb-border);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.jb-new__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.jb-new__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e8edf2;
}

.jb-new__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jb-new__cat {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 3px;
  line-height: 1.4;
}

.jb-new__title {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  line-height: 1.45;
  margin: 8px 10px 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jb-new__date {
  font-size: 10px;
  color: #999;
  margin: 0 10px 10px;
}

@media (min-width: 768px) {
  .jb-new__card {
    flex: 0 0 230px;
  }
}

/* --------------------------------------------------------------------------
   ③ カテゴリー別記事一覧
   -------------------------------------------------------------------------- */
.jb-cat-section {
  margin-bottom: 40px;
}

.jb-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .jb-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

.jb-card {
  display: block;
  text-decoration: none !important;
  background: #fff;
  border-radius: var(--jb-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid var(--jb-border);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.jb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.jb-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e8edf2;
}

.jb-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jb-card__body {
  padding: 8px 10px 10px;
}

.jb-card__title {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  line-height: 1.45;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jb-card__date {
  font-size: 10px;
  color: #999;
  margin: 0;
}

/* --------------------------------------------------------------------------
   サムネイルなし時のプレースホルダー
   -------------------------------------------------------------------------- */
.jb-no-thumb {
  width: 100%;
  height: 100%;
  background-color: var(--cat-color, #4A90B8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jb-no-thumb span {
  font-size: 2rem;
  opacity: 0.85;
}

/* ==========================================================================
   カテゴリー別セクションデザイン
   ========================================================================== */

/* 共通：セクション全体に背景色・パディング・角丸 */
.jb-cat-section {
  border-radius: 12px;
  padding: 20px 16px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .jb-cat-section {
    padding: 24px 20px;
    margin-bottom: 24px;
  }
}

/* --------------------------------------------------------------------------
   仮想通貨・暗号資産 (.cat-crypto) — ゴールドアクセント・ダークカード
   -------------------------------------------------------------------------- */
.cat-crypto {
  background: #FAFAFA;
}

.cat-crypto .jb-section-head {
  border-bottom-color: #D4AF37;
}

.cat-crypto .jb-section-title {
  color: #1A1A1A;
}

/* カード：黒背景・白文字 */
.cat-crypto .jb-card {
  background: #1A1A1A;
  border-color: #2e2e2e;
}

.cat-crypto .jb-card:hover {
  box-shadow: 0 6px 16px rgba(212,175,55,0.2);
}

.cat-crypto .jb-card__title {
  color: #F0F0F0;
}

.cat-crypto .jb-card__date {
  color: #888888;
}

.cat-crypto .jb-card__thumb {
  background: #2a2a2a;
}

/* --------------------------------------------------------------------------
   株式 (.cat-stock) — ブルーアクセント
   -------------------------------------------------------------------------- */
.cat-stock {
  background: #EDF5FF;
}

.cat-stock .jb-section-head {
  border-bottom-color: #2F80ED;
}

/* --------------------------------------------------------------------------
   日経平均 (.cat-nikkei) — グリーンアクセント
   -------------------------------------------------------------------------- */
.cat-nikkei {
  background: #EDF8ED;
}

.cat-nikkei .jb-section-head {
  border-bottom-color: #27AE60;
}

/* --------------------------------------------------------------------------
   為替・FX (.cat-fx) — パープルアクセント
   -------------------------------------------------------------------------- */
.cat-fx {
  background: #F2EEFF;
}

.cat-fx .jb-section-head {
  border-bottom-color: #6C5CE7;
}

/* --------------------------------------------------------------------------
   相場考察 (.cat-analysis) — グレーアクセント
   -------------------------------------------------------------------------- */
.cat-analysis {
  background: #F2F2F2;
}

.cat-analysis .jb-section-head {
  border-bottom-color: #555555;
}

/* --------------------------------------------------------------------------
   経済 (.cat-economy) — オレンジアクセント
   -------------------------------------------------------------------------- */
.cat-economy {
  background: #FFF6ED;
}

.cat-economy .jb-section-head {
  border-bottom-color: #F2994A;
}

/* --------------------------------------------------------------------------
   「もっと見る」ボタン：カテゴリーカラーを使わず統一
   -------------------------------------------------------------------------- */
.jb-cat-section .jb-section-more {
  color: #555;
  border-color: #ccc;
}

.jb-cat-section .jb-section-more:hover {
  background: #555;
  border-color: #555;
  color: #fff !important;
}

/* スマホ：背景色を切り詰めずフル幅に近く見せる */
@media (max-width: 767px) {
  .jb-fp-body {
    padding: 0 8px;
  }

  .jb-cat-section {
    border-radius: 8px;
    padding: 16px 12px;
  }
}