/* ============================================================
   men's house カスタムCSS SWELL版 v1
   コンセプト: 北欧調 — ブルーグレー × 柔らかい白 × ゴシック
   ============================================================ */

:root {
  --mh-ink: #232830;
  --mh-ink-soft: #5c6670;
  --mh-paper: #f6f7f8;
  --mh-accent: #5d7f94;
  --mh-accent-deep: #46647a;
  --mh-accent-pale: #e7edf1;
  --mh-hairline: #dbdfe3;
  --mh-radius: 10px;
}

body {
  background: var(--mh-paper) !important;
  color: var(--mh-ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- ヘッダー: 白ベース＋細罫線 ---- */
.l-header, #header, .l-header__inner {
  background: var(--mh-paper) !important;
  box-shadow: none !important;
}
.l-header { border-bottom: 1px solid var(--mh-hairline); }
.c-headLogo, .c-headLogo a, .l-header .c-headLogo__link {
  color: var(--mh-ink) !important;
  letter-spacing: .08em;
  font-weight: 700;
}
/* ヘッダー上の帯(ヘッダーバー) */
.l-headerBar, .p-headerBar {
  background: var(--mh-ink) !important;
  color: rgba(246,247,248,.7) !important;
  font-size: 11px;
  letter-spacing: .1em;
}

/* ---- グローバルナビ ---- */
.c-gnav > li > a, .c-gnavWrap a {
  color: var(--mh-ink) !important;
  font-size: 13px;
  letter-spacing: .12em;
}
.c-gnav > li > a:hover { color: var(--mh-accent-deep) !important; }
.c-gnav .sub-menu {
  background: #fff !important;
  border: 1px solid var(--mh-hairline);
  border-radius: var(--mh-radius);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(35,40,48,.10) !important;
}

/* ---- メインビジュアル: 文字とボタンをトーンに合わせる ---- */
.p-mainVisual__slideTitle { letter-spacing: .1em; font-weight: 700; }
.p-mainVisual .c-mvBtn__btn {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 999px;
  letter-spacing: .16em;
}

/* ---- 記事リスト: 白カード＋角丸＋ふわっと影 ---- */
.p-postList__item { margin-bottom: 6px; }
.p-postList__link, .p-postList__item > a {
  background: #fff;
  border-radius: var(--mh-radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(35,40,48,.05), 0 8px 22px rgba(35,40,48,.05);
  transition: transform .25s, box-shadow .25s;
}
.p-postList__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(35,40,48,.06), 0 16px 36px rgba(35,40,48,.10);
}
.p-postList__title {
  font-weight: 700 !important;
  line-height: 1.65 !important;
  letter-spacing: .01em;
}
.p-postList__meta, .c-postTimes { color: var(--mh-ink-soft) !important; font-size: 11.5px; }

/* カテゴリラベル: 淡ブルーのピル */
.c-postThumb__cat, .p-postList .c-categoryList__link, .c-categoryList a {
  background: var(--mh-accent-pale) !important;
  color: var(--mh-accent-deep) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: .16em;
  padding: 3px 12px !important;
  border: none !important;
}
.c-postThumb__cat:hover, .c-categoryList a:hover {
  background: var(--mh-accent) !important;
  color: #fff !important;
}

/* ---- 記事本文の見出し(既存記事の装飾と統一) ---- */
.post_content h2 {
  background: var(--mh-accent-pale) !important;
  color: var(--mh-ink) !important;
  font-weight: 700;
  border: none !important;
  border-radius: var(--mh-radius) !important;
  padding: 14px 18px !important;
  box-shadow: none !important;
}
.post_content h2::before, .post_content h2::after { content: none !important; }
.post_content h3 {
  background: transparent !important;
  color: var(--mh-ink) !important;
  font-weight: 700;
  border: none !important;
  border-bottom: 2px solid var(--mh-accent) !important;
  padding: 0 0 8px !important;
}
.post_content h3::before { content: none !important; }
.post_content h4 { border-color: var(--mh-accent) !important; }

/* ---- サイドバー ---- */
.c-widget { 
  background: #fff;
  border-radius: var(--mh-radius);
  box-shadow: 0 1px 4px rgba(35,40,48,.04), 0 6px 18px rgba(35,40,48,.04);
  padding: 20px !important;
}
.c-widget__title, .c-secTitle {
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700;
  color: var(--mh-ink) !important;
  border: none !important;
  border-bottom: 2px solid var(--mh-accent) !important;
  padding: 0 0 8px !important;
  letter-spacing: .12em;
}
.c-widget__title::before, .c-widget__title::after { content: none !important; }

/* ---- ページネーション ---- */
.c-pagination__link {
  background: #fff !important;
  color: var(--mh-ink) !important;
  border: 1px solid var(--mh-hairline) !important;
  border-radius: 999px !important;
}
.c-pagination__link.is-current, .c-pagination__link:hover {
  background: var(--mh-accent-deep) !important;
  color: #fff !important;
  border-color: var(--mh-accent-deep) !important;
}

/* ---- フッター ---- */
.l-footer {
  background: var(--mh-ink) !important;
  color: rgba(246,247,248,.75) !important;
}
.l-footer a { color: rgba(246,247,248,.75) !important; }
.l-footer a:hover { color: #a9c4d4 !important; }
.l-footer__copyright { color: rgba(246,247,248,.4) !important; font-size: 10.5px; letter-spacing: .12em; }

/* ---- 目次(SWELL標準) ---- */
.p-toc {
  background: #fff !important;
  border: 1px solid var(--mh-hairline) !important;
  border-radius: var(--mh-radius) !important;
}
.p-toc__title { letter-spacing: .16em; color: var(--mh-accent-deep) !important; }

/* ---- ボタン・リンク ---- */
a { transition: color .2s, opacity .2s; }
.c-moreBtn, .swell-block-button__link {
  border-radius: 999px !important;
  letter-spacing: .14em;
}



/* ---- 投稿スライダー(Feature): カードのトーン統一 ---- */
.p-postSlider .p-postList__link,
.p-postSlider .swiper-slide {
  border-radius: var(--mh-radius);
  overflow: hidden;
}
.p-postSlider__title { font-weight: 700; letter-spacing: .01em; }

/* ---- セクション見出し(トップの「新着記事」等) ---- */
.l-topContent__title, .c-secTitle {
  letter-spacing: .18em;
  font-weight: 700;
}

/* ============================================================
   v2追加: モックアップ再現（マストヘッド・セクション・文字あふれ修正）
   ============================================================ */

/* ---- マストヘッド: 中央大ロゴ＋タグライン（モックアップ型） ---- */
.l-header__inner { flex-direction: column; align-items: center; padding: 26px 16px 0 !important; }
.c-headLogo {
  max-width: none;
  margin: 0 auto;
  text-align: center;
}
.c-headLogo__link {
  font-size: 0 !important;
  display: block;
  line-height: 0;
}
.c-headLogo a::before, .c-headLogo a::after { line-height: 1.4; }
.c-headLogo a::before {
  content: "men's house";
  display: block;
  font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--mh-ink);
  line-height: 1.1;
}
.c-headLogo a::after {
  content: "STYLE · GROOMING · LIFE — かっこよくなるための情報を発信中";
  display: block;
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--mh-ink-soft);
  margin-top: 8px;
}
/* ナビを中央に */
.l-header__menu, .c-gnavWrap { justify-content: center !important; margin: 6px auto 0; }
.c-gnav { justify-content: center; }
/* ヘッダー上の細帯(YouTube URL)は非表示ですっきり */
.l-headerBar, .p-headerBar { display: none !important; }

/* ---- 記事スライダー: タイトル切れ修正(2行で省略) ---- */
.p-postSlider__title, .p-postSlider .p-postList__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- トップ(HOMEページ)はサイドバー非表示・1カラム ---- */
.home .l-sidebar, .page-id-3684 .l-sidebar { display: none !important; }
.home .c-breadcrumb, .page-id-3684 .c-breadcrumb, .home .p-breadcrumb, .page-id-3684 .p-breadcrumb { display: none !important; }
.home .l-main, .page-id-3684 .l-main { width: 100% !important; max-width: 100%; flex: 1 1 100%; }
.home .l-content { display: block; }
/* HOMEページのタイトルと余白 */
.home .c-pageTitle, .page-id-3684 .c-pageTitle { display: none; }

/* ---- セクション見出し(RANKING/LATEST/CATEGORY) ---- */
.post_content h2.mh-sechead {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 64px 0 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: "Avenir Next", "Avenir", sans-serif;
  font-size: 22px !important;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--mh-ink) !important;
}
.post_content h2.mh-sechead span {
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--mh-ink-soft);
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
}
.post_content h2.mh-sechead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mh-hairline);
  transform: translateY(-6px);
}

/* ---- ランキング: 番号バッジ ---- */
.mh-ranking .p-postList { counter-reset: mhrank; }
.mh-ranking .p-postList__item { counter-increment: mhrank; }
.mh-ranking .p-postList__item .p-postList__link { position: relative; }
.mh-ranking .p-postList__item .p-postList__link::before {
  content: counter(mhrank);
  position: absolute;
  top: 10px; left: 10px;
  z-index: 5;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--mh-accent-deep);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Avenir Next", sans-serif;
  font-weight: 600; font-size: 16px;
  box-shadow: 0 2px 8px rgba(35,40,48,.25);
}

/* ---- Aboutセクション ---- */
.mh-about {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
  border-radius: var(--mh-radius);
  box-shadow: 0 1px 4px rgba(35,40,48,.05), 0 8px 22px rgba(35,40,48,.05);
  padding: 36px 40px;
  margin: 64px 0 0;
}
.mh-about__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(100% 100% at 30% 25%, #b9cdd8, #6d8a9c 60%, #46647a);
  color: rgba(246,247,248,.95);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: .1em;
}
.mh-about__role { font-size: 11px !important; letter-spacing: .22em; color: var(--mh-accent-deep) !important; font-weight: 700; margin: 0 0 4px !important; }
.mh-about__title { font-size: 17px !important; font-weight: 700; margin: 0 0 8px !important; background: transparent !important; padding: 0 !important; border: none !important; }
.mh-about__text { font-size: 13.5px !important; color: var(--mh-ink-soft) !important; margin: 0 0 16px !important; }
.mh-about__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mh-btn {
  display: inline-block;
  font-size: 11.5px; letter-spacing: .16em; font-weight: 600;
  border-radius: 999px;
  padding: 9px 22px;
  text-decoration: none !important;
  transition: background .2s, color .2s;
}
.mh-btn--primary { background: var(--mh-accent-deep); color: #fff !important; border: 1px solid var(--mh-accent-deep); }
.mh-btn--primary:hover { background: var(--mh-ink); border-color: var(--mh-ink); }
.mh-btn--ghost { color: var(--mh-accent-deep) !important; border: 1px solid var(--mh-accent); }
.mh-btn--ghost:hover { background: var(--mh-accent-deep); color: #fff !important; }

/* ---- カテゴリタイル ---- */
.mh-catindex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.mh-catindex a {
  display: block;
  padding: 24px 12px;
  text-align: center;
  background: #fff;
  border-radius: var(--mh-radius);
  box-shadow: 0 1px 4px rgba(35,40,48,.04), 0 6px 18px rgba(35,40,48,.04);
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s;
}
.mh-catindex a:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(35,40,48,.06), 0 12px 28px rgba(35,40,48,.09);
}
.mh-catindex .en {
  display: block;
  font-family: "Avenir Next", sans-serif;
  font-weight: 600; font-size: 15px;
  letter-spacing: .16em;
  color: var(--mh-accent-deep);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.mh-catindex .ja { font-size: 11.5px; letter-spacing: .18em; color: var(--mh-ink-soft); }

@media (max-width: 768px) {
  .c-headLogo a::before { font-size: 26px; }
  .c-headLogo a::after { font-size: 9px; letter-spacing: .18em; }
  .mh-about { grid-template-columns: 1fr; text-align: center; padding: 26px 20px; }
  .mh-about__avatar { margin: 0 auto; }
  .mh-about__actions { justify-content: center; }
  .mh-catindex { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ---- 修正: ロゴ中央寄せ＋投稿リストのタイトルh2誤爆解除 ---- */
.l-header__logo { margin: 0 auto !important; float: none !important; }
.l-header__inner { justify-content: center !important; }
.post_content h2.p-postList__title,
.post_content .p-postList__title {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  margin: 0 0 6px !important;
}

/* ---- 最終微修正 ---- */
/* Aboutタイトルのh2スタイル誤爆解除 */
.post_content h2.mh-about__title {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 17px !important;
  margin: 0 0 8px !important;
}
/* ヘッダー上のキャッチフレーズ帯(YouTube URL)非表示 */
.c-catchphrase { display: none !important; }
/* 追従ヘッダー(スクロール時)はロゴ小さく・タグライン非表示 */
.l-fixHeader .c-headLogo a::after { display: none !important; }
.l-fixHeader .c-headLogo a::before { font-size: 20px !important; }
.l-fixHeader .l-header__inner { flex-direction: row !important; padding: 6px 16px 0 !important; align-items: center; }
.l-fixHeader .l-header__logo { margin: 0 16px 0 0 !important; }

/* ============================================================
   v3追加: 視認性強化（本文太さ・中央寄せ・ロゴ/ナビ拡大）
   ============================================================ */

/* ---- 本文: フォント極細の再発防止と読みやすさ ---- */
body, .post_content {
  font-weight: 400 !important;
}
.post_content {
  color: #1e2228 !important;
  font-size: 16px;
  line-height: 1.9;
}
.post_content strong { font-weight: 700; }

/* ---- コンテンツ枠を中央寄せ(左寄り解消) ---- */
.l-content.l-container, .l-container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- ロゴ&タグライン: インパクト強化 ---- */
.c-headLogo a::before {
  font-size: 46px;
  letter-spacing: .14em;
}
.c-headLogo a::after {
  content: "STYLE · GROOMING · LIFE — かっこよくなるための情報を発信中";
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--mh-accent-deep);
  margin-top: 12px;
}

/* ---- グローバルナビ: モックアップ型(英字ラベル上・日本語下)・拡大 ---- */
.c-gnav > li > a {
  display: flex !important;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  padding: 14px 18px !important;
}
.c-gnav > li > a .ttl {
  font-size: 14.5px !important;
  letter-spacing: .14em;
  font-weight: 500;
}
.c-gnav > li > a .desc,
.c-gnav .c-smallNavTitle {
  display: block !important;
  font-family: "Avenir Next", "Avenir", sans-serif;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mh-accent) !important;
  opacity: 1 !important;
}
.c-gnav > li > a:hover .ttl { color: var(--mh-accent-deep); }

@media (max-width: 768px) {
  .c-headLogo a::before { font-size: 30px; }
  .c-headLogo a::after { font-size: 10px; letter-spacing: .2em; }
}

/* ---- フロントページ: 本文カラムを全幅化して中央に ---- */
.page-id-3684 .l-content > *,
.home.page .l-content > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}
.page-id-3684 .post_content,
.home.page .post_content {
  max-width: 1080px;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* スライダーも同じ幅感に */
.page-id-3684 .p-postSlider, .home .p-postSlider { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ============================================================
   v4追加: マストヘッドの作り込み（北欧ミニマル・2トーンロゴ）
   ============================================================ */

/* ロゴ上の小さなアクセントバー */
.l-header__logo::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--mh-accent);
  margin: 0 auto 16px;
}

/* ロゴ本体: men's=墨色 / house=ブルーグレー の2トーン */
.c-headLogo a::before {
  content: "men's house";
  display: block;
  font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
  font-size: 52px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--mh-ink) 0%, var(--mh-ink) 50%, var(--mh-accent-deep) 50%, var(--mh-accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--mh-ink);
}

/* タグライン上段: 英字を左右の罫線ではさむ */
.c-headLogo a::after {
  content: "STYLE · GROOMING · LIFE";
  display: inline-block;
  font-family: "Avenir Next", "Avenir", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--mh-accent-deep);
  margin-top: 16px;
  padding: 0 84px;
  background:
    linear-gradient(var(--mh-hairline), var(--mh-hairline)) left center / 60px 1px no-repeat,
    linear-gradient(var(--mh-hairline), var(--mh-hairline)) right center / 60px 1px no-repeat;
}

/* タグライン下段: 日本語を小さく */
.c-headLogo::after {
  content: "かっこよくなるための情報を発信中";
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--mh-ink-soft);
  margin-top: 10px;
}

/* 追従ヘッダーでは簡略表示 */
.l-fixHeader .l-header__logo::before,
.l-fixHeader .c-headLogo::after {
  display: none !important;
}
.l-fixHeader .c-headLogo a::after { display: none !important; }
.l-fixHeader .c-headLogo a::before {
  font-size: 20px !important;
  -webkit-text-fill-color: initial;
  background: none;
  color: var(--mh-ink);
}

@media (max-width: 768px) {
  .l-header__logo::before { margin-bottom: 10px; width: 26px; }
  .c-headLogo a::before { font-size: 32px; }
  .c-headLogo a::after {
    font-size: 9.5px;
    letter-spacing: .28em;
    text-indent: .28em;
    padding: 0 52px;
    background:
      linear-gradient(var(--mh-hairline), var(--mh-hairline)) left center / 36px 1px no-repeat,
      linear-gradient(var(--mh-hairline), var(--mh-hairline)) right center / 36px 1px no-repeat;
    margin-top: 12px;
  }
  .c-headLogo::after { font-size: 9px; letter-spacing: .22em; text-indent: .22em; }
}

/* ---- v4修正: ロゴコンテナの幅・高さ制約を解除 ---- */
.l-header__logo,
.l-header__logo .c-headLogo,
.l-header__logo .c-headLogo__link {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  text-align: center !important;
}
.c-headLogo a::before {
  white-space: nowrap;
}
.c-headLogo a::after {
  white-space: nowrap;
}
.l-header__inner {
  height: auto !important;
  min-height: 0 !important;
}
/* 追従ヘッダーは幅解除の対象外(横並びのまま) */
.l-fixHeader .l-header__logo,
.l-fixHeader .c-headLogo,
.l-fixHeader .c-headLogo__link {
  width: auto !important;
  text-align: left !important;
}

/* ---- 記事スライダーに「PICK UP」ラベル ---- */
.p-postSlider::before {
  content: "PICK UP — おすすめ記事";
  display: block;
  text-align: center;
  font-family: "Avenir Next", "Avenir", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--mh-accent-deep);
  margin: 26px 0 4px;
}

/* ============================================================
   v5追加: セクションのメリハリ（表彰台RANKING・ダークPICK UP・
   淡ブルーAbout・アウトラインCATEGORY）
   ============================================================ */

/* ---- RANKING: 1位を大きく(表彰台レイアウト) ---- */
@media (min-width: 769px) {
  .mh-ranking .p-postList {
    display: grid !important;
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
  }
  .mh-ranking .p-postList__item { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .mh-ranking .p-postList__item:nth-child(1) { grid-row: 1 / 3; }
  .mh-ranking .p-postList__item:nth-child(1) .p-postList__link { height: 100%; }
  .mh-ranking .p-postList__item:nth-child(1) .p-postList__title {
    font-size: 21px !important;
    line-height: 1.6 !important;
    padding: 4px 6px 0 !important;
  }
  .mh-ranking .p-postList__item:nth-child(1) .p-postList__link::before {
    width: 46px; height: 46px; font-size: 22px;
    background: var(--mh-ink);
  }
}

/* ---- PICK UP: 画面幅いっぱいのダーク帯 ---- */
.mh-dark {
  background: linear-gradient(165deg, #232830 0%, #2c3542 100%);
  margin: 80px calc(50% - 50vw) 0 !important;
  padding: 56px calc(50vw - 50%) 64px !important;
  max-width: none !important;
}
.mh-dark .mh-sechead {
  color: #f6f7f8 !important;
  margin-top: 0 !important;
}
.mh-dark .mh-sechead span { color: rgba(246,247,248,.55) !important; }
.mh-dark .mh-sechead::after { background: rgba(246,247,248,.16) !important; }
.mh-dark .p-postList__link {
  background: #323c4b !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
.mh-dark .p-postList__link:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.4) !important;
}
.mh-dark .p-postList__title { color: #f6f7f8 !important; }
.mh-dark .p-postList__meta, .mh-dark .c-postTimes, .mh-dark .c-postTimes__posted {
  color: rgba(246,247,248,.55) !important;
}
.mh-dark .c-postThumb__cat {
  background: rgba(246,247,248,.14) !important;
  color: #dce7ee !important;
}
.mh-dark .c-postThumb__cat:hover { background: var(--mh-accent) !important; color: #fff !important; }

/* ---- About: 淡ブルーの面に ---- */
.mh-about {
  background: var(--mh-accent-pale);
  box-shadow: none;
  border-radius: 14px;
  padding: 44px 48px;
  margin-top: 80px;
}
.mh-about__avatar { box-shadow: 0 6px 18px rgba(70,100,122,.35); }
.mh-btn--ghost { background: transparent; }

/* ---- CATEGORY: アウトラインタイルでミニマルに ---- */
.mh-catindex a {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--mh-hairline);
}
.mh-catindex a:hover {
  background: #fff;
  border-color: var(--mh-accent);
  box-shadow: 0 8px 22px rgba(35,40,48,.08);
}

/* ---- セクション見出しの階層(RANKINGを主役に) ---- */
.post_content h2.mh-sechead { font-size: 24px !important; }
.mh-dark .mh-sechead { font-size: 24px !important; }

@media (max-width: 768px) {
  .mh-dark { padding-top: 40px !important; padding-bottom: 44px !important; margin-top: 56px !important; }
  .mh-about { padding: 26px 20px; }
}

/* ---- v5修正: ダーク帯の見出し色(優先度強化)と1位カードのサムネ伸長 ---- */
.post_content .mh-dark h2.mh-sechead {
  color: #f6f7f8 !important;
  margin-top: 0 !important;
}
.post_content .mh-dark h2.mh-sechead span { color: rgba(246,247,248,.55) !important; }

@media (min-width: 769px) {
  .mh-ranking .p-postList__item:nth-child(1) .p-postList__link {
    display: flex;
    flex-direction: column;
  }
  .mh-ranking .p-postList__item:nth-child(1) .p-postList__thumb {
    flex: 1 1 auto;
    display: flex;
  }
  .mh-ranking .p-postList__item:nth-child(1) .c-postThumb__figure {
    height: 100%;
    width: 100%;
    padding-top: 0 !important;
    aspect-ratio: auto !important;
    position: relative;
  }
  .mh-ranking .p-postList__item:nth-child(1) .c-postThumb__figure img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}