@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ。MobilyWise オリジナルデザイン(案B モノトーン+シアン確定 / 2026-04-30)。
Theme URI: https://wp-cocoon.com/
Author: わいひら / MobilyWise customization by モビ
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.2.0
*/

/* ============================================================================
 * MobilyWise オリジナルデザイン
 *   - 設計書: docs/design-guidelines.md
 *   - カラースキーム: 案B モノトーン+シアン確定
 *   - 方針: モダン / テック / ビジネスライク / アフィ感払拭
 *   - 実装ルール: !important 乱用禁止 / モバイルファースト / Cocoon機能は壊さない
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1. CSS Custom Properties(設計トークン)
 * -------------------------------------------------------------------------- */
:root {
  /* Color: Primary */
  --mw-primary:       #1A1A1A;   /* ヘッダー / 見出し / フッター */
  --mw-accent:        #00A8E8;   /* リンク / CTA / 強調 */
  --mw-accent-hover:  #0089BA;   /* hover時アクセント */
  --mw-bg:            #FAFAFA;   /* サイト全体背景(オフホワイト) */
  --mw-bg-card:       #FFFFFF;   /* カード/コンテンツ背景 */
  --mw-bg-subtle:     #F0F0F0;   /* セクション/コード背景 */

  /* Color: Text */
  --mw-text:          #2C2C2C;   /* 本文 */
  --mw-text-sub:      #5A5A5A;   /* 補足 */
  --mw-text-mute:     #888888;   /* メタ/出典 */

  /* Color: Border / Status */
  --mw-border:        #E5E5E5;
  --mw-success:       #00C853;
  --mw-warning:       #FF9100;
  --mw-danger:        #FF1744;
  --mw-info:          #00A8E8;

  /* Typography */
  --mw-font-base:
    "Inter", "Noto Sans JP",
    -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --mw-font-mono:
    "SF Mono", Monaco, Consolas, "Courier New", monospace;
  --mw-font-size-base:    16px;
  --mw-line-height-base:  1.75;
  --mw-line-height-head:  1.4;
  --mw-letter-spacing:    0.02em;

  /* Spacing(8px グリッド) */
  --mw-space-xs:   4px;
  --mw-space-sm:   8px;
  --mw-space-md:  16px;
  --mw-space-lg:  24px;
  --mw-space-xl:  40px;
  --mw-space-2xl: 64px;

  /* Layout */
  --mw-content-width: 720px;
  --mw-site-width:    1200px;

  /* Border radius(モダン+シャープ) */
  --mw-radius-sm: 2px;
  --mw-radius-md: 4px;

  /* Shadow(極小限) */
  --mw-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
  --mw-shadow-md: 0 4px 8px rgba(26, 26, 26, 0.08);

  /* Transition */
  --mw-transition-fast: 0.15s ease;
  --mw-transition-base: 0.2s ease;

  /* z-index トークン(Phase 2-C 以降の競合防止のため明示化) */
  --mw-z-cat-label:    2;     /* 記事カード内のカテゴリラベル */
  --mw-z-hero-content: 1;     /* ヒーローのテキスト/グラフィック(背景擬似要素より上) */
  --mw-z-accent-line:  1000;  /* ヘッダー上部 Cyan アクセントライン */
}

/* ----------------------------------------------------------------------------
 * 2. ベース要素(リセット最小限)
 * -------------------------------------------------------------------------- */
body {
  font-family: var(--mw-font-base);
  font-size: var(--mw-font-size-base);
  line-height: var(--mw-line-height-base);
  letter-spacing: var(--mw-letter-spacing);
  color: var(--mw-text);
  background-color: var(--mw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------------------
 * 3. タイポグラフィ
 *    親テーマよりも具体性をやや上げる(.entry-content スコープ併用)
 *    !important は使わない
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--mw-font-base);
  color: var(--mw-primary);
  line-height: var(--mw-line-height-head);
  letter-spacing: var(--mw-letter-spacing);
  font-weight: 700;
}

/* モバイルファースト(基本サイズ) */
.entry-title,
.article h1,
h1 {
  font-size: 26px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--mw-space-lg);
}

.entry-content h2,
.article h2,
h2 {
  font-size: 22px;
  font-weight: 700;
  margin-top: var(--mw-space-xl);
  margin-bottom: var(--mw-space-md);
  padding-bottom: var(--mw-space-sm);
  border-bottom: 2px solid var(--mw-accent);
  background: none;
}

.entry-content h3,
.article h3,
h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: var(--mw-space-lg);
  margin-bottom: var(--mw-space-sm);
  padding-left: var(--mw-space-sm);
  border-left: 3px solid var(--mw-accent);
  background: none;
}

.entry-content h4,
.article h4,
h4 {
  font-size: 16px;
  font-weight: 600;
  margin-top: var(--mw-space-lg);
  margin-bottom: var(--mw-space-sm);
}

.entry-content p,
.article p,
p {
  margin-top: 0;
  margin-bottom: 1.5em;
}

/* 強調 */
strong, b {
  font-weight: 700;
  color: var(--mw-primary);
}

/* キャプション・補足 */
small, .caption {
  font-size: 14px;
  color: var(--mw-text-mute);
}

/* ----------------------------------------------------------------------------
 * 4. リンク
 * -------------------------------------------------------------------------- */
a {
  color: var(--mw-accent);
  text-decoration: none;
  transition: color var(--mw-transition-fast);
}

a:hover,
a:focus {
  color: var(--mw-accent-hover);
  text-decoration: underline;
}

/* マウスクリック時のアウトラインは抑制し、キーボード操作時のみ表示(WCAG準拠) */
a:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible {
  outline: 2px solid var(--mw-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
 * 5. ボタン(.mw-btn-primary / .mw-btn-secondary)
 * -------------------------------------------------------------------------- */
.mw-btn,
.mw-btn-primary,
a.mw-btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background-color: var(--mw-accent);
  color: #FFFFFF;
  font-family: var(--mw-font-base);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--mw-radius-md);
  cursor: pointer;
  transition:
    background-color var(--mw-transition-base),
    transform var(--mw-transition-fast),
    box-shadow var(--mw-transition-base);
}

.mw-btn:hover,
.mw-btn-primary:hover,
a.mw-btn-primary:hover {
  background-color: var(--mw-accent-hover);
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--mw-shadow-sm);
}

.mw-btn-secondary,
a.mw-btn-secondary {
  display: inline-block;
  padding: 13px 31px;
  background-color: transparent;
  color: var(--mw-primary);
  font-family: var(--mw-font-base);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--mw-primary);
  border-radius: var(--mw-radius-md);
  cursor: pointer;
  transition:
    background-color var(--mw-transition-base),
    color var(--mw-transition-base);
}

.mw-btn-secondary:hover,
a.mw-btn-secondary:hover {
  background-color: var(--mw-primary);
  color: #FFFFFF;
  text-decoration: none;
}

/* ----------------------------------------------------------------------------
 * 6. Cocoon 既存スタイル打ち消し(必要最小限)
 * -------------------------------------------------------------------------- */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background-color: transparent;
}

.article strong {
  color: var(--mw-primary);
}

/* ----------------------------------------------------------------------------
 * 7. レスポンシブ(モバイルファースト → 上位ブレークポイントで上書き)
 * -------------------------------------------------------------------------- */

/* タブレット以上(768px〜) */
@media screen and (min-width: 768px) {
  .entry-title,
  .article h1,
  h1 {
    font-size: 34px;
    margin-bottom: var(--mw-space-xl);
  }
  .entry-content h2,
  .article h2,
  h2 {
    font-size: 26px;
  }
  .entry-content h3,
  .article h3,
  h3 {
    font-size: 20px;
  }
  .entry-content h4,
  .article h4,
  h4 {
    font-size: 18px;
  }
}

/* デスクトップ以上(1024px〜): Phase 2 以降で追記 */

/* ============================================================================
 * Phase 2-A 高優先修正(2026-04-30)
 *   1. アーカイブ/トップページのタイトル重複表示を打ち消し
 *   2. SNS シェアボタンを個別記事のみ表示
 *   3. 記事カードのモダンデザイン化(モノトーン+シアン)
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 8. タイトル重複表示の打ち消し
 *    Cocoon の archive/home/front-top-page で entry-card 内に
 *    タイトルが二重出力される事象に対処。entry-card-title を正規とし、
 *    その後に並ぶ追加のタイトル要素を非表示にする。
 * -------------------------------------------------------------------------- */
.entry-card-title + .entry-card-title,
.entry-card-title ~ .entry-card-title,
.entry-card-content > h2:not(.entry-card-title),
.entry-card-content > h3:not(.entry-card-title),
.entry-card-wrap > h2,
.front-top-page .post-title:not(.entry-card-title),
.archive .article-list .post-title:not(.entry-card-title) {
  display: none;
}

/* ----------------------------------------------------------------------------
 * 9. SNSシェアボタン:個別記事ページでのみ表示
 *    アーカイブ/ホーム/カテゴリ等の一覧画面では非表示にする。
 * -------------------------------------------------------------------------- */
body:not(.single) .sns-share-buttons,
body:not(.single) .sns-share,
body:not(.single) .sns-follow-buttons,
.entry-card .sns-share-buttons,
.entry-card-content .sns-share-buttons,
.front-top-page .sns-share-buttons,
.archive .sns-share-buttons,
.home .sns-share-buttons,
.search .sns-share-buttons,
.category .sns-share-buttons,
.tag .sns-share-buttons {
  display: none;
}

.single .sns-share-buttons,
.single .sns-share {
  display: block;
}

/* ----------------------------------------------------------------------------
 * 10. 記事カード(モノトーン+シアン)
 * -------------------------------------------------------------------------- */

/* カードラッパー(<a class="entry-card-wrap">) */
a.entry-card-wrap,
.entry-card-wrap {
  display: block;
  background-color: var(--mw-bg-card);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  margin-bottom: var(--mw-space-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--mw-text);
  transition:
    transform var(--mw-transition-base),
    box-shadow var(--mw-transition-base),
    border-color var(--mw-transition-base);
}

a.entry-card-wrap:hover,
.entry-card-wrap:hover {
  border-color: var(--mw-accent);
  box-shadow: var(--mw-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--mw-text);
}

/* カード内ボックスは透過(背景はラッパーのみ) */
.entry-card,
.e-card {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.entry-card-content,
.e-card-content,
.card-content {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: var(--mw-space-md);
}

/* サムネイル */
.entry-card-thumb,
.card-thumb {
  display: block;
  margin: 0;
  background-color: var(--mw-bg-subtle);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.entry-card-thumb img,
.card-thumb img,
.entry-card-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

a.entry-card-wrap:hover .entry-card-thumb img,
a.entry-card-wrap:hover .card-thumb img,
a.entry-card-wrap:hover .entry-card-thumb-image {
  transform: scale(1.03);
}

/* No image プレースホルダー
 *   Cocoon は、アイキャッチ未設定時に <img class="no-image list-no-image"> を出力する。
 *   このデフォルト灰色画像を非表示にし、figure 自体に Black→Cyan グラデを当てる。
 *   :has() を使って親 figure を判定(モダンブラウザのみ。Safari 15.4+/Chrome 105+)。
 */

/* デフォルトno-image画像本体を非表示 */
.entry-card-thumb img.no-image,
.entry-card-thumb img.list-no-image,
img.entry-card-thumb-image.no-image {
  display: none;
}

/* figure 全体を MobilyWise ブランドのグラデーションに */
.entry-card-thumb:has(img.no-image),
.entry-card-thumb:has(img.list-no-image) {
  background: linear-gradient(135deg, #1A1A1A 0%, #2C2C2C 60%, rgba(0, 168, 232, 0.5) 100%);
  min-height: 180px;
}

.entry-card-thumb:has(img.no-image)::before,
.entry-card-thumb:has(img.list-no-image)::before {
  content: "MobilyWise";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--mw-font-base);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  z-index: 1;
}

/* :has() 非対応ブラウザ向けの fallback(従来クラスベース、Cocoon が付ける場合のみ) */
.no-image-thumb,
.entry-card-thumb-noimage {
  background: linear-gradient(135deg, #1A1A1A 0%, #2C2C2C 60%, rgba(0, 168, 232, 0.5) 100%);
  position: relative;
  min-height: 180px;
}

.no-image-thumb::after,
.entry-card-thumb-noimage::after {
  content: "MobilyWise";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--mw-font-base);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
}

/* タイトル(カード) */
.entry-card-title,
.card-title,
.e-card-title {
  font-family: var(--mw-font-base);
  color: var(--mw-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 var(--mw-space-sm);
  letter-spacing: var(--mw-letter-spacing);
  background: none;
  padding: 0;
  border: none;
  transition: color var(--mw-transition-fast);
}

a.entry-card-wrap:hover .entry-card-title,
a.entry-card-wrap:hover .card-title,
a.entry-card-wrap:hover .e-card-title {
  color: var(--mw-accent);
}

/* 抜粋 */
.entry-card-snippet,
.card-snippet {
  font-size: 14px;
  color: var(--mw-text-sub);
  line-height: 1.6;
  margin: 0 0 var(--mw-space-sm);
  letter-spacing: var(--mw-letter-spacing);
}

/* メタ情報(日付・著者など) */
.entry-card-meta,
.card-meta {
  font-size: 12px;
  color: var(--mw-text-mute);
  display: flex;
  align-items: center;
  gap: var(--mw-space-sm);
  flex-wrap: wrap;
  margin-top: var(--mw-space-md);
  letter-spacing: 0.03em;
}

.entry-card-meta a,
.card-meta a {
  color: var(--mw-text-mute);
}

/* カテゴリラベル
 *   Cocoon標準では <figure class="entry-card-thumb"> 内の <span class="cat-label">
 *   が画像左上に absolute で重なる仕様。Phase 2-A 初版で position 解除してしまい
 *   figure 内に通常フローで表示される不具合があったため、絶対配置を明示する。
 */
.entry-card-thumb .cat-label,
.card-thumb .cat-label,
figure.entry-card-thumb .cat-label,
.cat-label.cat-label-1,
.cat-label.cat-label-2,
.cat-label.cat-label-3 {
  position: absolute;
  top: var(--mw-space-sm);
  left: var(--mw-space-sm);
  z-index: var(--mw-z-cat-label);
}

.cat-label,
.entry-card-category,
.entry-card-categories a {
  display: inline-block;
  padding: 3px 10px;
  background-color: var(--mw-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--mw-radius-sm);
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.4;
  transition: background-color var(--mw-transition-fast);
}

a.cat-label,
.cat-label a {
  color: #FFFFFF;
  text-decoration: none;
  background-color: var(--mw-primary);
}

a.cat-label:hover,
.cat-label:hover,
.cat-label a:hover,
.entry-card-categories a:hover {
  background-color: var(--mw-accent);
  color: #FFFFFF;
}

/* READ MORE 表記をカード末尾に挿入(a.entry-card-wrap 内に限定。
   フィード/AMP/プラグイン側で .entry-card-content が再利用されたときの誤注入を防止) */
a.entry-card-wrap .entry-card-content::after,
a.entry-card-wrap .card-content::after {
  content: "READ MORE →";
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--mw-accent);
  letter-spacing: 0.1em;
  margin-top: var(--mw-space-md);
  padding-top: var(--mw-space-md);
  border-top: 1px solid var(--mw-border);
  transition: letter-spacing var(--mw-transition-fast);
}

a.entry-card-wrap:hover .entry-card-content::after,
a.entry-card-wrap:hover .card-content::after {
  letter-spacing: 0.15em;
}

/* Phase 2-A 初版で広く設定していた `.entry-card-content::after` セレクタを
   a.entry-card-wrap 配下に絞ったため、フィード等で同名クラスが
   再利用されても READ MORE が誤って差し込まれない設計に変更 */

/* デスクトップでの微調整 */
@media screen and (min-width: 768px) {
  .entry-card-title,
  .card-title {
    font-size: 18px;
  }
  .entry-card-content,
  .e-card-content,
  .card-content {
    padding: var(--mw-space-lg);
  }
}

/* ============================================================================
 * Phase 2-A 続き: ヘッダーロゴ画像表示(2026-04-30)
 *   Cocoon の the_site_logo_url 設定で <img> がヘッダーに出力される際の
 *   サイズ・余白・レスポンシブを案B仕様に整える。Retina(2倍)を意識。
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 11. ヘッダーロゴ画像
 * -------------------------------------------------------------------------- */

/* ロゴ画像コンテナ(Cocoon の各種クラスを横断的に対象)
 *   高さベースで指定:モバイル40px / タブレット50px / デスクトップ60px
 *   元ファイル logo-header.png は 800×142px(比率 5.63:1)
 *   高さ40px時の幅 ≒ 225px、60px時の幅 ≒ 338px
 */
.header-container .site-name a img,
.header-container .logo-image img,
.header-container .site-logo-image,
.site-name-logo-image,
.logo-image img,
.site-logo .logo-image {
  display: block;
  height: 40px;            /* モバイル: 控えめな高さ */
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  /* Retina 対応: 高解像度ディスプレイで鮮明に表示 */
  image-rendering: -webkit-optimize-contrast;
}

/* ロゴ周辺の余白(詰めすぎないため) */
.header-container .site-name,
.header-container .logo-image,
.site-logo {
  padding: var(--mw-space-sm) var(--mw-space-md);
}

/* テキストロゴ表示時(画像未設定 or fallback)のスタイル */
.site-name a:not(:has(img)),
.site-name-text {
  color: var(--mw-primary);
  text-decoration: none;
  font-family: var(--mw-font-base);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  transition: color var(--mw-transition-fast);
}

.site-name a:hover {
  color: var(--mw-accent);
  text-decoration: none;
}

/* タブレット以上 */
@media screen and (min-width: 768px) {
  .header-container .site-name a img,
  .header-container .logo-image img,
  .header-container .site-logo-image,
  .site-name-logo-image,
  .logo-image img {
    height: 50px;
  }
  .site-name a:not(:has(img)),
  .site-name-text {
    font-size: 24px;
  }
}

/* デスクトップ */
@media screen and (min-width: 1024px) {
  .header-container .site-name a img,
  .header-container .logo-image img,
  .header-container .site-logo-image,
  .site-name-logo-image,
  .logo-image img {
    height: 60px;
  }
  .site-name a:not(:has(img)),
  .site-name-text {
    font-size: 26px;
  }
}

/* ============================================================================
 * Phase 2-B: ヘッダー強化 + グローバルナビ + ヒーローセクション(2026-04-30)
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 12. ヘッダー上部の Cyan アクセントライン + 下部境界線
 * -------------------------------------------------------------------------- */
body::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--mw-accent);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--mw-z-accent-line);
  pointer-events: none;
}

/* WordPress 管理者ログイン時、admin-bar(高さ32px / モバイル46px)の下に
   アクセントラインを下げて物理衝突を回避する */
body.admin-bar::before {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar::before {
    top: 46px;
  }
}

/* Cocoon ヘッダーは 3px のアクセントライン分オフセット */
.header-container {
  margin-top: 3px;
  border-bottom: 1px solid var(--mw-border);
  background-color: var(--mw-bg-card);
}

/* ----------------------------------------------------------------------------
 * 13. グローバルナビ
 * -------------------------------------------------------------------------- */

/* ナビ全体のラッパ */
.navi {
  background-color: var(--mw-bg-card);
  border-top: 1px solid var(--mw-border);
  border-bottom: 1px solid var(--mw-border);
}

.navi-in {
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: auto;
}

/* メニュー本体(PC) */
.menu-pc,
.mw-menu-global {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none; /* モバイルでは非表示(Cocoonハンバーガーが代替) */
}

.mw-menu-global > li,
.mw-menu-global .mw-menu-item {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.mw-menu-global a,
.mw-menu-global .mw-menu-link {
  display: inline-block;
  padding: 14px 20px;
  color: var(--mw-text);
  font-family: var(--mw-font-base);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  background: none;
  transition:
    color var(--mw-transition-fast),
    border-color var(--mw-transition-base);
}

.mw-menu-global a:hover,
.mw-menu-global a:focus-visible {
  color: var(--mw-accent);
  border-bottom-color: var(--mw-accent);
  text-decoration: none;
  background: none;
}

/* Coming Soon バッジ */
.mw-coming-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background-color: var(--mw-text-mute);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--mw-radius-sm);
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.4;
}

.mw-menu-item--coming .mw-menu-link {
  color: var(--mw-text-mute);
  cursor: default;
  user-select: none;
}

.mw-menu-item--coming .mw-menu-link:hover {
  color: var(--mw-text-mute);
  border-bottom-color: transparent;
}

/* モバイル(767px以下): PC ナビは非表示。Cocoon のハンバーガー利用 */
@media screen and (max-width: 767px) {
  .menu-pc,
  .mw-menu-global {
    display: none;
  }
}

/* タブレット以上: PC ナビを表示 */
@media screen and (min-width: 768px) {
  .menu-pc,
  .mw-menu-global {
    display: flex;
    flex-wrap: wrap;
  }
}

/* ----------------------------------------------------------------------------
 * 14. ヒーローセクション(トップページ)— 専門メディア風(ITmedia / ケータイWatch)
 *   背景: チャコール単色 #262932 + シアン細ライン(上下 3px ボーダー)
 *   質感: 微細グリッド ::before(rgba 2.5%、48px ピッチ、目立たない程度)
 *   トーン: 報道メディアの権威感、装飾は最小限
 * -------------------------------------------------------------------------- */

.mw-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 0 0 var(--mw-space-xl) 0;
  padding: 80px 20px;
  min-height: 420px;
  color: #FFFFFF;
  background: #262932;
  border-top: 3px solid var(--mw-accent);
  border-bottom: 3px solid var(--mw-accent);
}

/* 微細グリッドパターン(テック感を控えめに演出) */
.mw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.mw-hero__inner {
  position: relative;
  z-index: var(--mw-z-hero-content);
  width: 100%;
  max-width: var(--mw-site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mw-space-xl);
  align-items: center;
}

/* テキストブロック(装飾なし、シンプルな段落構造) */
.mw-hero__content {
  /* グラスモーフィズム関連はすべて撤去済み */
}

/* eyebrow:資格バッジ風(シアン細枠 + シアン文字) */
.mw-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px 0;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--mw-accent);
  border-radius: 4px;
  color: var(--mw-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: none;
}

/* タイトル:報道メディア風の力強い見出し */
.mw-hero__title {
  margin: 0 0 20px 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--mw-font-base);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

/* リード:落ち着いた可読性重視 */
.mw-hero__lead {
  margin: 0 0 32px 0;
  max-width: 580px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: var(--mw-letter-spacing);
}

/* CTA wrapper */
.mw-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

/* Primary CTA(シアンソリッド、4px 角・影なし・浮きなし) */
.mw-hero .mw-btn-primary,
.mw-hero a.mw-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--mw-accent);
  border: 1px solid var(--mw-accent);
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.mw-hero .mw-btn-primary:hover,
.mw-hero a.mw-btn-primary:hover {
  background: var(--mw-accent-hover);
  border-color: var(--mw-accent-hover);
  color: #FFFFFF;
}

.mw-hero .mw-btn-primary:focus-visible,
.mw-hero a.mw-btn-primary:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* Secondary CTA(透過 + 白ボーダー、4px 角・浮きなし) */
.mw-btn-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 4px;
  color: #FFFFFF;
  font-family: var(--mw-font-base);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.mw-btn-on-dark:hover,
.mw-btn-on-dark:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: #FFFFFF;
  text-decoration: none;
}

/* グラフィック(SVG + モビ welcome)— モバイル/タブレットでは非表示 */
.mw-hero__graphic {
  display: none;
  position: relative;
}

.mw-hero__welcome {
  display: none;
}

.mw-hero__br-pc {
  display: none;
}

/* タブレット(>= 768px) */
@media screen and (min-width: 768px) {
  .mw-hero {
    padding: 80px 32px;
  }
  .mw-hero__eyebrow {
    font-size: 13px;
  }
  .mw-hero__title {
    font-size: 36px;
  }
  .mw-hero__lead {
    font-size: 16px;
  }
}

/* デスクトップ(>= 1024px):2カラム + グラフィック表示 */
@media screen and (min-width: 1024px) {
  .mw-hero {
    padding: 80px 40px;
  }
  .mw-hero__inner {
    grid-template-columns: 1fr 280px;
    gap: var(--mw-space-2xl);
  }
  .mw-hero__title {
    font-size: 42px;
    line-height: 1.4;
  }
  .mw-hero__lead {
    font-size: 17px;
  }
  .mw-hero__br-pc {
    display: block;
  }
  .mw-hero__graphic {
    display: block;
    width: 280px;
    height: 280px;
  }
  .mw-hero__svg {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.5;
  }
  /* SVG の色は元のシアン(presentation attribute stroke="#00A8E8")を維持
     前回の白色 !important 上書きは撤去済み */
  .mw-hero__welcome {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 140px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.30));
    /* 派手な mwOwlBob アニメは撤去済み(静止) */
  }
}

/* モバイル(< 768px):チャコール単色維持(縦グラデは撤去) */
@media screen and (max-width: 767px) {
  .mw-hero {
    padding: 60px 16px;
    min-height: 360px;
    background: #262932;
  }
}

/* ============================================================================
 * 15. アクセシビリティ:動きの抑制(WCAG 2.3.3 Animation from Interactions)
 *     OS設定で「視差効果を減らす(Reduce Motion)」を選んでいるユーザーには、
 *     hover時の浮き・拡大・スクロールアニメーションを無効化する。
 *     `!important` は WCAG 準拠目的の例外パターンとして許容。
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* hover時の transform を無効化(Phase 2-A 記事カード / ヒーローCTA / Phase 2-D.1 トップ拡張) */
  a.entry-card-wrap:hover,
  a.entry-card-wrap:hover .entry-card-thumb img,
  a.entry-card-wrap:hover .card-thumb img,
  .mw-hero__cta .mw-btn-primary:hover,
  .mw-btn:hover,
  .mw-btn-primary:hover,
  .mw-pickup__card:hover,
  .mw-pickup__card:hover .mw-pickup__thumb img,
  .mw-latest__card:hover,
  .mw-latest__card:hover .mw-latest__thumb img {
    transform: none !important;
  }
}

/* ============================================================================
 * Phase 2-D.1: トップページセクション拡張(2026-05-01)
 *   16. .mw-section 共通(コンテナ + 見出し + アンカー)
 *   17. .mw-pickup(編集部ピックアップ3本)
 *   18. .mw-latest(カテゴリ別最新記事)
 *   19. .mw-author-card(著者プロフィール)
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 16. セクション共通
 * -------------------------------------------------------------------------- */
.mw-section-inner {
  max-width: var(--mw-site-width);
  margin: 0 auto;
  padding: var(--mw-space-2xl) var(--mw-space-md);
}

.mw-section__head {
  margin-bottom: var(--mw-space-xl);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mw-space-md);
}

.mw-section__title {
  font-family: var(--mw-font-base);
  font-size: 22px;
  font-weight: 700;
  color: var(--mw-primary);
  margin: 0;
  padding: 0 0 0 var(--mw-space-md);
  border: none;
  background: none;
  line-height: 1.3;
  position: relative;
}

.mw-section__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.1em;
  background: var(--mw-accent);
}

.mw-section__sub {
  margin: 0 0 0 auto;
  color: var(--mw-text-mute);
  font-size: 13px;
  letter-spacing: var(--mw-letter-spacing);
}

.mw-section__more {
  margin-left: auto;
  color: var(--mw-accent);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: color var(--mw-transition-fast);
}

.mw-section__more:hover,
.mw-section__more:focus-visible {
  color: var(--mw-accent-hover);
  text-decoration: underline;
}

.mw-anchor {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 768px) {
  .mw-section-inner { padding: 80px var(--mw-space-lg); }
  .mw-section__title { font-size: 26px; }
  .mw-section__more { font-size: 14px; }
  .mw-section__sub { font-size: 14px; }
}

@media screen and (min-width: 1024px) {
  .mw-section-inner { padding: 80px var(--mw-space-xl); }
}

/* ----------------------------------------------------------------------------
 * 17. .mw-pickup(編集部ピックアップ3本)
 * -------------------------------------------------------------------------- */
.mw-pickup {
  background: var(--mw-bg-card);
  border-bottom: 1px solid var(--mw-border);
}

.mw-pickup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mw-space-lg);
}

@media screen and (min-width: 768px) {
  .mw-pickup__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mw-pickup__card {
  display: block;
  background: var(--mw-bg-card);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--mw-text);
  position: relative;
  transition:
    border-color var(--mw-transition-base),
    box-shadow var(--mw-transition-base),
    transform var(--mw-transition-base);
}

.mw-pickup__card:hover,
.mw-pickup__card:focus-visible {
  border-color: var(--mw-accent);
  box-shadow: var(--mw-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--mw-text);
  outline: none;
}

.mw-pickup__rank {
  position: absolute;
  top: var(--mw-space-sm);
  right: var(--mw-space-sm);
  background: var(--mw-accent);
  color: #FFFFFF;
  font-family: var(--mw-font-base);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--mw-radius-sm);
  letter-spacing: 0.08em;
  z-index: 2;
}

.mw-pickup__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--mw-bg-subtle);
  position: relative;
  overflow: hidden;
}

.mw-pickup__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.mw-pickup__card:hover .mw-pickup__thumb img {
  transform: scale(1.03);
}

.mw-pickup__thumb--placeholder {
  background: linear-gradient(135deg, #1A1A1A 0%, #2C2C2C 60%, rgba(0, 168, 232, 0.5) 100%);
}

.mw-pickup__thumb--placeholder::before {
  content: "MobilyWise";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--mw-font-base);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
}

.mw-pickup__body {
  padding: var(--mw-space-md);
}

.mw-pickup__cat {
  display: inline-block;
  padding: 2px 8px;
  background: var(--mw-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--mw-radius-sm);
  margin-bottom: var(--mw-space-sm);
  line-height: 1.4;
}

.mw-pickup__title {
  font-family: var(--mw-font-base);
  font-size: 15px;
  font-weight: 700;
  color: var(--mw-primary);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  letter-spacing: var(--mw-letter-spacing);
  transition: color var(--mw-transition-fast);
}

.mw-pickup__card:hover .mw-pickup__title {
  color: var(--mw-accent);
}

@media screen and (min-width: 768px) {
  .mw-pickup__title { font-size: 16px; }
  .mw-pickup__body { padding: var(--mw-space-lg); }
}

/* ----------------------------------------------------------------------------
 * 18. .mw-latest(カテゴリ別最新)
 * -------------------------------------------------------------------------- */
.mw-latest {
  background: var(--mw-bg);
  border-bottom: 1px solid var(--mw-border);
}

.mw-latest + .mw-latest {
  border-top: none;
}

.mw-latest__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mw-space-lg);
}

@media screen and (min-width: 600px) {
  .mw-latest__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .mw-latest__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mw-latest__card {
  display: block;
  background: var(--mw-bg-card);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--mw-text);
  transition:
    border-color var(--mw-transition-base),
    box-shadow var(--mw-transition-base),
    transform var(--mw-transition-base);
}

.mw-latest__card:hover,
.mw-latest__card:focus-visible {
  border-color: var(--mw-accent);
  box-shadow: var(--mw-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--mw-text);
  outline: none;
}

.mw-latest__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--mw-bg-subtle);
  position: relative;
  overflow: hidden;
}

.mw-latest__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.mw-latest__card:hover .mw-latest__thumb img {
  transform: scale(1.03);
}

.mw-latest__thumb--placeholder {
  background: linear-gradient(135deg, #1A1A1A 0%, #2C2C2C 60%, rgba(0, 168, 232, 0.5) 100%);
}

.mw-latest__thumb--placeholder::before {
  content: "MobilyWise";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--mw-font-base);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
}

.mw-latest__body {
  padding: var(--mw-space-md);
}

.mw-latest__title {
  font-family: var(--mw-font-base);
  font-size: 15px;
  font-weight: 700;
  color: var(--mw-primary);
  line-height: 1.5;
  margin: 0 0 var(--mw-space-sm);
  padding: 0;
  border: none;
  background: none;
  letter-spacing: var(--mw-letter-spacing);
  transition: color var(--mw-transition-fast);
}

.mw-latest__card:hover .mw-latest__title {
  color: var(--mw-accent);
}

.mw-latest__meta {
  margin: 0;
  font-size: 12px;
  color: var(--mw-text-mute);
  letter-spacing: 0.03em;
}

@media screen and (min-width: 768px) {
  .mw-latest__title { font-size: 16px; }
  .mw-latest__body { padding: var(--mw-space-lg); }
}

/* ----------------------------------------------------------------------------
 * 19. (退役) .mw-author-card(Phase 2-D.1)
 *     Phase 2-E.2 で .mw-editorial-team / .mw-member-card に置き換え。
 *     復帰したい場合は backup-20260504-* の style.css から該当ブロックを参照。
 *
 * 19'. .mw-editorial-team / .mw-member-card(編集部紹介 / Phase 2-E.2)
 *     2カラム横並び(PC) / 1カラム積み重ね(SP)。3人目以降も自動拡張可。
 * -------------------------------------------------------------------------- */
.mw-editorial-team {
  background: var(--mw-tk-bg-sub);
  border-top: 1px solid var(--mw-tk-border);
  border-bottom: 1px solid var(--mw-tk-border);
}

.mw-editorial-team__inner {
  max-width: var(--mw-tk-max-width);
  margin: 0 auto;
  padding: 48px 24px;
}

.mw-editorial-team__head {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--mw-tk-text);
}

.mw-editorial-team__title {
  position: relative;
  margin: 0;
  padding: 0 0 0 16px;
  background: none;
  border: none;
  font-family: var(--mw-font-base);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mw-tk-text);
}

.mw-editorial-team__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  background: var(--mw-tk-red);
}

.mw-editorial-team__sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--mw-text-sub);
}

.mw-editorial-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.mw-editorial-team__footer {
  margin-top: 32px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .mw-editorial-team__inner {
    padding: 60px 24px;
  }
  .mw-editorial-team__title {
    font-size: 24px;
  }
  .mw-editorial-team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* メンバーカード(.mw-card と同系トーン:白背景 + 1px 罫線、角丸なし) */
.mw-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 24px;
  background: var(--mw-tk-bg);
  border: 1px solid var(--mw-tk-border);
  text-align: center;
}

.mw-member-card__avatar {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--mw-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

.mw-member-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.mw-member-card__avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--mw-font-base);
  font-size: 40px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0;
}

.mw-member-card__body {
  flex: 1;
  width: 100%;
}

.mw-member-card__role {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  background: var(--mw-tk-red);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mw-member-card__name {
  margin: 0 0 12px 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--mw-font-base);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--mw-tk-text);
  letter-spacing: -0.01em;
}

.mw-member-card__bio {
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mw-text);
  letter-spacing: var(--mw-letter-spacing);
  text-align: left;
}

.mw-member-card__highlights {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mw-member-card__highlights li {
  padding: 12px 8px;
  background: var(--mw-tk-bg-sub);
  border: 1px solid var(--mw-tk-border);
  font-size: 11px;
  line-height: 1.4;
  color: var(--mw-text-sub);
  text-align: center;
}

.mw-member-card__highlights li strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--mw-accent);
  letter-spacing: 0.02em;
}

.mw-member-card__highlights li span {
  display: block;
}

.mw-member-card__topics {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--mw-text-sub);
  text-align: left;
}

@media screen and (min-width: 768px) {
  .mw-member-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding: 32px;
    text-align: left;
  }
  .mw-member-card__avatar {
    width: 120px;
    height: 120px;
  }
  .mw-member-card__avatar-placeholder {
    font-size: 48px;
  }
  .mw-member-card__name {
    font-size: 24px;
  }
  .mw-member-card__highlights li strong {
    font-size: 20px;
  }
}

/* ----------------------------------------------------------------------------
 * 20. .mw-thanks-section(フッター手前のお礼セクション / Phase A モビ実装)
 *     Cocoon標準フッター直前に挿入。トップページ1ページ目のみ表示。
 *     functions.php の cocoon_footer_before フックから描画される。
 * -------------------------------------------------------------------------- */
.mw-thanks-section {
  background: var(--mw-bg-subtle);
  border-top: 1px solid var(--mw-border);
}

.mw-thanks-section__inner {
  max-width: var(--mw-content-width);
  margin: 0 auto;
  padding: var(--mw-space-xl) var(--mw-space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mw-space-md);
}

.mw-thanks-section__avatar {
  width: 100px;
  height: auto;
  display: block;
  pointer-events: none;
}

.mw-thanks-section__text {
  margin: 0;
  font-size: 13px;
  color: var(--mw-text-sub);
  letter-spacing: var(--mw-letter-spacing);
  line-height: 1.6;
}

@media screen and (min-width: 768px) {
  .mw-thanks-section__inner {
    padding: var(--mw-space-2xl) var(--mw-space-lg);
    gap: var(--mw-space-lg);
  }
  .mw-thanks-section__avatar {
    width: 120px;
  }
  .mw-thanks-section__text {
    font-size: 14px;
  }
}

/* ============================================================================
 * Phase 2-E.1〜E.2: 東洋経済オンライン構造(2026-05-04)
 *   ※ 21. .mw-header-bar は Phase 2-E.2 で削除(Cocoon 既定ヘッダーと二重描画のため)
 *   22. .mw-top-banner(注目記事大型バナー)
 *   23. .mw-section / .mw-section__header / .mw-section__title(共通)
 *   24. .mw-card-grid / .mw-card(東洋経済風カード)
 *   25. .mw-promo-banner(編集部紹介横長バナー)
 *   26. .mw-archive-list(カテゴリアーカイブ一覧)
 *   27. .mw-mega-footer(多列メガフッター)
 *   28. Cocoon 上書き(キャッチフレーズ非表示)
 * ----------------------------------------------------------------------------
 *  共通方針:
 *   - 背景: 白(#FFFFFF)ベース、罫線 #E5E5E5、強調赤 #C8102E、シアン #00A8E8
 *   - 角丸: ほぼ未使用(border-radius: 0 がデフォルト)
 *   - hover: opacity 変化 + border 変化のみ(transform 浮きなし)
 *   - !important 不使用
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 共通変数(プロト用追加)
 * -------------------------------------------------------------------------- */
:root {
  --mw-tk-red:       #C8102E;
  --mw-tk-border:    #E5E5E5;
  --mw-tk-bg:        #FFFFFF;
  --mw-tk-bg-sub:    #FAFAFA;
  --mw-tk-text:      #1A1A1A;
  --mw-tk-meta:      #888888;
  --mw-tk-max-width: 1280px;
}

/* ----------------------------------------------------------------------------
 * 21. (退役) .mw-header-bar
 *     Phase 2-E.1 で追加した独自ヘッダー(プライマリ + セカンダリ)は
 *     Cocoon 既定ヘッダーと二重描画になるため Phase 2-E.2 で削除済み。
 *     復帰したい場合は backup-20260504-* の style.css から該当ブロックを参照。
 * -------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * 22. .mw-top-banner(注目記事大型バナー)
 *     Phase 2-F:左側コンテンツエリアをダークシアン → 黒のグラデに変更し、
 *     サイト全体のシアンアクセントとの連続性を確保。テキストコントラストは
 *     #0A2540 vs #FFFFFF で 13.88:1(WCAG AAA クリア)。
 * -------------------------------------------------------------------------- */
.mw-top-banner {
  /* 親側の単色を撤去し、左側コンテンツエリア側でグラデを担当 */
  background: var(--mw-tk-text);
}

.mw-top-banner__link {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  max-width: var(--mw-tk-max-width);
  margin: 0 auto;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.mw-top-banner__link:hover,
.mw-top-banner__link:focus-visible {
  opacity: 0.85;
}

.mw-top-banner__content {
  padding: 16px;
  background: linear-gradient(135deg, #0A2540 0%, #1A1A1A 100%);
}

.mw-top-banner__category {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 4px 12px;
  background: var(--mw-accent);
  border-left: 3px solid var(--mw-tk-red);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mw-top-banner__title {
  margin: 0 0 8px 0;
  padding: 0;
  background: none;
  border: none;
  color: #FFFFFF;
  font-family: var(--mw-font-base);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.mw-top-banner__lead {
  display: none; /* モバイルでは非表示(高さ削減) */
  margin: 0 0 16px 0;
  color: rgba(255, 255, 255, 0.90);
  font-size: 14px;
  line-height: 1.7;
}

.mw-top-banner__date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.70);
}

.mw-top-banner__visual {
  position: relative;
  min-height: 140px;
  background: linear-gradient(135deg, var(--mw-accent) 0%, var(--mw-accent-hover) 100%);
  overflow: hidden;
}

/* placeholder(画像なし)のとき:明るめグレー + シアン罫線で「写真がない」状態を中立化 */
.mw-top-banner__visual--placeholder {
  background: #F5F5F5;
  border-left: 3px solid var(--mw-accent);
}

/* 画像あり時に、左コンテンツとの境界に薄いダークシアンのオーバーレイを敷いて滑らかに繋ぐ */
.mw-top-banner__visual:not(.mw-top-banner__visual--placeholder)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 80px;
  background: linear-gradient(90deg, rgba(10, 37, 64, 0.5), transparent);
  pointer-events: none;
  z-index: 1;
}

.mw-top-banner__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 768px) {
  .mw-top-banner__link {
    grid-template-columns: 1fr 1fr;
  }
  .mw-top-banner__content {
    padding: 60px 40px;
  }
  .mw-top-banner__title {
    font-size: 32px;
    margin-bottom: 16px;
  }
  .mw-top-banner__lead {
    display: block; /* タブレット以上では表示 */
    font-size: 15px;
  }
  .mw-top-banner__visual {
    min-height: 320px;
  }
}

/* ----------------------------------------------------------------------------
 * 23. .mw-section(セクション共通 / 東洋経済プロト用)
 *     既存 .mw-section(セクション共通)とは別に、TK風の見出しスタイルを上書き
 * -------------------------------------------------------------------------- */
.mw-section {
  padding: 48px 24px;
  background: var(--mw-tk-bg);
}

.mw-section--archive {
  background: var(--mw-tk-bg-sub);
}

.mw-section__inner {
  max-width: var(--mw-tk-max-width);
  margin: 0 auto;
}

.mw-section__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--mw-tk-text);
}

.mw-section__title {
  position: relative;
  margin: 0;
  padding: 0 0 0 16px;
  background: none;
  border: none;
  font-family: var(--mw-font-base);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mw-tk-text);
}

.mw-section__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  background: var(--mw-tk-red);
}

.mw-section__title-prefix {
  margin-right: 8px;
  color: var(--mw-tk-red);
  font-size: 14px;
  font-weight: 600;
}

.mw-section__more {
  font-size: 13px;
  font-weight: 600;
  color: var(--mw-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.mw-section__more:hover,
.mw-section__more:focus-visible {
  color: var(--mw-accent-hover);
}

@media screen and (min-width: 768px) {
  .mw-section {
    padding: 60px 24px;
  }
  .mw-section__title {
    font-size: 24px;
  }
}

/* ----------------------------------------------------------------------------
 * 24. .mw-card-grid / .mw-card(東洋経済風カード)
 * -------------------------------------------------------------------------- */
.mw-card-grid {
  display: grid;
  gap: 24px;
}

.mw-card-grid--6col {
  grid-template-columns: repeat(2, 1fr);
}

.mw-card-grid--4col {
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 768px) {
  .mw-card-grid--6col,
  .mw-card-grid--4col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .mw-card-grid--6col {
    grid-template-columns: repeat(3, 1fr);
  }
  .mw-card-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mw-card {
  display: flex;
  flex-direction: column;
  background: var(--mw-tk-bg);
  color: var(--mw-tk-text);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.mw-card:hover,
.mw-card:focus-visible {
  opacity: 0.7;
}

.mw-card__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--mw-accent) 0%, var(--mw-accent-hover) 100%);
  overflow: hidden;
}

.mw-card__visual--placeholder {
  background: linear-gradient(135deg, var(--mw-accent) 0%, var(--mw-accent-hover) 100%);
}

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

.mw-card__category {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 3px 8px;
  background: var(--mw-tk-red);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mw-card__title {
  margin: 0 0 8px 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--mw-font-base);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mw-tk-text);
}

.mw-card__date {
  font-size: 11px;
  color: var(--mw-tk-meta);
}

@media screen and (min-width: 1024px) {
  .mw-card__title {
    font-size: 15px;
  }
}

/* ----------------------------------------------------------------------------
 * 25. .mw-promo-banner(運営者紹介横長バナー)
 * -------------------------------------------------------------------------- */
.mw-promo-banner {
  background: var(--mw-accent);
  padding: 32px 24px;
}

.mw-promo-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: var(--mw-tk-max-width);
  margin: 0 auto;
}

.mw-promo-banner__label {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mw-promo-banner__text {
  flex: 1;
  margin: 0;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.mw-promo-banner__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: #FFFFFF;
  color: var(--mw-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #FFFFFF;
  transition: background 0.2s ease, color 0.2s ease;
}

.mw-promo-banner__cta:hover,
.mw-promo-banner__cta:focus-visible {
  background: var(--mw-tk-text);
  border-color: var(--mw-tk-text);
  color: #FFFFFF;
}

@media screen and (min-width: 1024px) {
  .mw-promo-banner__inner {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}

/* ----------------------------------------------------------------------------
 * 26. .mw-archive-list(カテゴリ別アーカイブ動線)
 * -------------------------------------------------------------------------- */
.mw-archive-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 768px) {
  .mw-archive-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .mw-archive-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mw-archive-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--mw-tk-bg);
  border: 1px solid var(--mw-tk-border);
  text-decoration: none;
  color: var(--mw-tk-text);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mw-archive-list__item:hover,
.mw-archive-list__item:focus-visible {
  border-color: var(--mw-accent);
  color: var(--mw-accent);
}

.mw-archive-list__count {
  font-size: 22px;
  font-weight: 800;
  color: var(--mw-tk-red);
  font-family: var(--mw-font-base);
  letter-spacing: -0.02em;
  min-width: 40px;
}

.mw-archive-list__name {
  font-size: 14px;
  font-weight: 700;
}

/* ----------------------------------------------------------------------------
 * 27. .mw-mega-footer(多列メガフッター)
 *     functions.php の mw_render_mega_footer() で cocoon_footer_before に挿入
 * -------------------------------------------------------------------------- */
.mw-mega-footer {
  background: var(--mw-tk-text);
  color: #FFFFFF;
  padding: 60px 24px 24px;
  margin-top: 60px;
  font-family: var(--mw-font-base);
}

.mw-mega-footer__inner {
  display: grid;
  gap: 40px;
  max-width: var(--mw-tk-max-width);
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 1024px) {
  .mw-mega-footer__inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mw-mega-footer__col-title {
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}

.mw-mega-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mw-mega-footer__col li {
  margin-bottom: 8px;
}

.mw-mega-footer__col a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}

.mw-mega-footer__col a:hover,
.mw-mega-footer__col a:focus-visible {
  color: var(--mw-accent);
}

.mw-mega-footer__col p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.mw-mega-footer__bottom {
  max-width: var(--mw-tk-max-width);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ----------------------------------------------------------------------------
 * 28. Cocoon 既定ヘッダー上書き(Phase 2-E.2 / Phase 2-E.3 修正)
 *     キャッチフレーズ(タグライン)表示を CSS で抑止。
 *     Phase 2-E.2 で誤って `.tagline-wrap` を指定したが、Cocoon 実際の出力は
 *     `<div class="tagline" itemprop="alternativeHeadline">…</div>`。
 *     ロゴ直下の単独 div であり、削除しても itemprop の構造化データ自体は
 *     `<title>` / OGP / SEO Simple Pack のメタタグから供給されるため副作用なし。
 *     親テーマは `.tagline { display: block; }` を明示しているため `!important`
 *     なしでもよいが、テーマカスタマイザー上書き対策で防御的に付与。
 * -------------------------------------------------------------------------- */
.tagline {
  display: none !important;
}

/* ----------------------------------------------------------------------------
 * 29. Cocoon 既定フッター抑止(Phase 2-E.4 / 2026-05-05)
 *     トップページのみ Cocoon 親テーマ既定フッター(`<footer id="footer">`)を
 *     非表示にする。自前メガフッター(`<footer class="mw-mega-footer">`)は id を
 *     持たないため `#footer` セレクタには引っかからず影響なし。
 *
 *     スコープは `body.home`(WordPress 標準)に限定。
 *     カテゴリ・タグ・個別記事・固定ページの body には `home` クラスが付かないため、
 *     これらのページのフッターは従来通り表示される。
 *
 *     `cocoon_footer_after` で発火するモバイルメニューボタン/トップへ戻るボタン/
 *     管理者パネル等は `#footer` の外側なので影響しない。
 * -------------------------------------------------------------------------- */
body.home #footer {
  display: none !important;
}

/* ----------------------------------------------------------------------------
 * 30. .mw-ad-slot(アフィリエイト広告枠 / Phase 2-F / 2026-05-05)
 *     トップページの2箇所(B-1: TOP BANNER 直後、B-2: thanks 直前)に挿入される
 *     プレースホルダー枠。実装時は内側 .mw-ad-slot__placeholder を ASP コードに
 *     差し替える前提。「PR / 広告」ラベルは法定表示のため絶対に削除しないこと
 *     (ステマ規制 / 景表法対応)。
 * -------------------------------------------------------------------------- */
.mw-ad-slot {
  margin: 0 auto;
  padding: 24px;
  max-width: 970px;
  width: 100%;
  box-sizing: border-box;
}

.mw-ad-slot--horizontal {
  /* placeholder 段階の枠サイズ。実コード差し替え時はここで横幅制御を継続 */
}

.mw-ad-slot__inner {
  position: relative;
  padding: 24px 16px;
  background: var(--mw-tk-bg-sub);
  border: 2px dashed #CCCCCC;
}

.mw-ad-slot__label {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #666666;
  font-family: var(--mw-font-base);
}

.mw-ad-slot__placeholder {
  text-align: center;
  padding: 24px 8px;
}

.mw-ad-slot__placeholder-text {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
  color: #777777;
  letter-spacing: 0.05em;
}

.mw-ad-slot__placeholder-meta {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #999999;
}

/* 実装後、placeholder を消し ASP コードを入れたケース用の表示制御 */
.mw-ad-slot__content {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .mw-ad-slot {
    padding: 32px 24px;
  }
  .mw-ad-slot__inner {
    padding: 32px 24px;
    min-height: 120px;
  }
  .mw-ad-slot__placeholder {
    padding: 32px 16px;
  }
}

/* ============================================================================
 * Phase 2-G.1: スマホ・ガジェット ジャンルページ専用(2026-05-05)
 *   31. .mw-genre-hero(ジャンルヒーロー / Phase 2-F の TOP BANNER と同系)
 *   32. .mw-genre-author(テック紹介カード / .mw-member-card 系を踏襲)
 *   33. .mw-genre-pickup(注目記事3カード / 既存 .mw-card-grid--3col を再利用)
 *   34. .mw-genre-latest(カテゴリ最新記事4カード / 既存 .mw-card-grid--4col を再利用)
 *   35. .mw-genre-related(関連ジャンル予告枠 / .mw-ad-slot 系の点線ボーダー踏襲)
 * ----------------------------------------------------------------------------
 *  共通方針: 既存 .mw-card / .mw-card-grid / .mw-section 系は再利用し、
 *  ジャンル特化部分のみ .mw-genre-* で新規宣言。
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 31. .mw-genre-hero(ジャンルヒーロー)
 * -------------------------------------------------------------------------- */
.mw-genre-hero {
  background: linear-gradient(135deg, #0A2540 0%, #1A1A1A 100%);
  color: #FFFFFF;
  padding: 64px 24px;
}

.mw-genre-hero__inner {
  max-width: var(--mw-tk-max-width);
  margin: 0 auto;
  text-align: center;
}

.mw-genre-hero__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(0, 168, 232, 0.6);
  color: var(--mw-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.mw-genre-hero__title {
  margin: 0 0 16px 0;
  padding: 0;
  background: none;
  border: none;
  color: #FFFFFF;
  font-family: var(--mw-font-base);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mw-genre-hero__lead {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.90);
  font-size: 14px;
  line-height: 1.7;
}

@media screen and (min-width: 768px) {
  .mw-genre-hero {
    padding: 80px 40px;
  }
  .mw-genre-hero__title {
    font-size: 42px;
  }
  .mw-genre-hero__lead {
    font-size: 16px;
  }
}

/* ----------------------------------------------------------------------------
 * 32. .mw-genre-author(テック紹介カード)
 *     .mw-member-card 系を踏襲しつつ、単独カードとして中央寄せ + 余白調整
 * -------------------------------------------------------------------------- */
.mw-genre-author {
  background: var(--mw-tk-bg-sub);
  padding: 48px 24px;
  border-bottom: 1px solid var(--mw-tk-border);
}

.mw-genre-author__inner {
  max-width: 800px;
  margin: 0 auto;
}

.mw-genre-author__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 24px;
  background: var(--mw-tk-bg);
  border: 1px solid var(--mw-tk-border);
  text-align: center;
}

.mw-genre-author__avatar {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--mw-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

.mw-genre-author__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.mw-genre-author__avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  font-family: var(--mw-font-base);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0;
}

.mw-genre-author__body {
  flex: 1;
  width: 100%;
}

.mw-genre-author__role {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  background: var(--mw-tk-red);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mw-genre-author__name {
  margin: 0 0 12px 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--mw-tk-text);
  font-family: var(--mw-font-base);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mw-genre-author__bio {
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mw-text);
  letter-spacing: var(--mw-letter-spacing);
  text-align: left;
}

.mw-genre-author__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mw-genre-author__highlights li {
  padding: 12px 8px;
  background: var(--mw-tk-bg-sub);
  border: 1px solid var(--mw-tk-border);
  font-size: 11px;
  line-height: 1.4;
  color: var(--mw-text-sub);
  text-align: center;
}

.mw-genre-author__highlights li strong {
  display: block;
  margin-bottom: 4px;
  color: var(--mw-accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mw-genre-author__highlights li span {
  display: block;
}

@media screen and (min-width: 768px) {
  .mw-genre-author__card {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding: 32px;
    text-align: left;
  }
  .mw-genre-author__avatar {
    width: 120px;
    height: 120px;
  }
  .mw-genre-author__avatar-placeholder {
    font-size: 48px;
  }
  .mw-genre-author__name {
    font-size: 24px;
  }
  .mw-genre-author__highlights li strong {
    font-size: 20px;
  }
}

/* ----------------------------------------------------------------------------
 * 33. .mw-genre-pickup / 34. .mw-genre-latest
 *     既存 .mw-section / .mw-card-grid を再利用するため、追加スタイルは最小限
 * -------------------------------------------------------------------------- */
.mw-card-grid--3col {
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 768px) {
  .mw-card-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .mw-card-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* `.mw-section__more` は既存 a タグを想定しているが、span でも整形は通る。
   暫定版ラベル(ピックアップ右上)はクリック不可を明示するため hover 効果を抑止。 */
span.mw-section__more {
  cursor: default;
  color: var(--mw-text-sub);
}

/* ----------------------------------------------------------------------------
 * 35. .mw-genre-related(関連ジャンル予告枠)
 * -------------------------------------------------------------------------- */
.mw-genre-related {
  background: var(--mw-tk-bg-sub);
  padding: 48px 24px;
  border-top: 1px solid var(--mw-tk-border);
}

.mw-genre-related__inner {
  max-width: var(--mw-tk-max-width);
  margin: 0 auto;
  text-align: center;
}

.mw-genre-related__title {
  position: relative;
  display: inline-block;
  margin: 0 0 8px 0;
  padding: 0 0 0 16px;
  background: none;
  border: none;
  color: var(--mw-tk-text);
  font-family: var(--mw-font-base);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mw-genre-related__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  background: var(--mw-tk-red);
}

.mw-genre-related__sub {
  margin: 0 0 24px 0;
  color: var(--mw-text-sub);
  font-size: 13px;
}

.mw-genre-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  text-align: left;
}

@media screen and (min-width: 768px) {
  .mw-genre-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mw-genre-related__item {
  position: relative;
  padding: 24px 20px;
  background: var(--mw-tk-bg);
  border: 2px dashed #CCCCCC;
}

.mw-genre-related__item--upcoming {
  /* 将来公開予定:点線ボーダーで「準備中」を視覚化 */
}

.mw-genre-related__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  background: var(--mw-tk-text);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mw-genre-related__name {
  margin: 0 0 8px 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--mw-tk-text);
  font-family: var(--mw-font-base);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.mw-genre-related__desc {
  margin: 0;
  color: var(--mw-text-sub);
  font-size: 13px;
  line-height: 1.6;
}

@media screen and (min-width: 768px) {
  .mw-genre-related {
    padding: 60px 24px;
  }
}

/* ============================================================================
 * Phase 2-H: 用語集個別ページ・アーカイブ(2026-05-06)
 *   /glossary/{slug}/  → single-glossary.php
 *   /glossary/         → archive-glossary.php
 * ========================================================================== */
.mw-glossary-archive,
.mw-glossary-single {
  background: var(--mw-tk-bg-sub);
}

.mw-glossary-archive__hero,
.mw-glossary-article__head {
  background: linear-gradient(135deg, #0A2540 0%, #1A1A1A 100%);
  color: #FFFFFF;
  padding: 64px 24px;
  text-align: center;
}

.mw-glossary-archive__hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.mw-glossary-archive__eyebrow,
.mw-glossary-article__label {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 12px;
  background: var(--mw-accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mw-glossary-archive__title,
.mw-glossary-article__title {
  margin: 0 0 16px 0;
  padding: 0;
  background: none;
  border: none;
  color: #FFFFFF;
  font-family: var(--mw-font-base);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}

@media screen and (min-width: 768px) {
  .mw-glossary-archive__title,
  .mw-glossary-article__title {
    font-size: 36px;
  }
}

.mw-glossary-archive__lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.7;
}

.mw-glossary-archive__lead a {
  color: var(--mw-accent);
  text-decoration: underline;
}

.mw-glossary-article__genre {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 11px;
}

.mw-glossary-article__breadcrumb {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px 24px;
  font-size: 12px;
  color: var(--mw-text-sub);
  background: var(--mw-tk-bg-sub);
}

.mw-glossary-article__breadcrumb a {
  color: var(--mw-accent);
  text-decoration: none;
}

.mw-glossary-archive__list-inner,
.mw-glossary-article__body,
.mw-glossary-article__footer {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px;
  background: var(--mw-tk-bg);
}

@media screen and (min-width: 768px) {
  .mw-glossary-archive__list-inner,
  .mw-glossary-article__body,
  .mw-glossary-article__footer {
    padding: 48px 40px;
  }
}

.mw-glossary-archive__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mw-glossary-archive__item {
  border-bottom: 1px solid var(--mw-tk-border);
  padding: 24px 0;
}

.mw-glossary-archive__item:first-child {
  padding-top: 0;
}

.mw-glossary-archive__item a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.mw-glossary-archive__item a:hover {
  opacity: 0.7;
}

.mw-glossary-archive__item-genre {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  background: var(--mw-accent);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mw-glossary-archive__item-title {
  margin: 0 0 8px 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--mw-font-base);
  font-size: 20px;
  font-weight: 700;
  color: var(--mw-tk-text);
  letter-spacing: -0.01em;
}

.mw-glossary-archive__item-excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mw-text-sub);
}

.mw-glossary-article__body h2 {
  margin: 32px 0 16px 0;
  padding: 0 0 0 12px;
  background: none;
  border-left: 4px solid var(--mw-accent);
  font-size: 22px;
  font-weight: 700;
  color: var(--mw-tk-text);
}

.mw-glossary-article__body h3 {
  margin: 24px 0 12px 0;
  font-size: 17px;
  font-weight: 700;
}

.mw-glossary-article__body p {
  margin: 0 0 16px 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mw-tk-text);
}

.mw-glossary-article__body ul,
.mw-glossary-article__body ol {
  margin: 0 0 16px 0;
  padding-left: 24px;
  line-height: 1.85;
}

.mw-glossary-article__body a {
  color: var(--mw-accent);
}

.mw-glossary-article__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--mw-tk-border);
}

@media screen and (min-width: 768px) {
  .mw-glossary-article__footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

.mw-glossary-article__back,
.mw-glossary-article__archive {
  color: var(--mw-accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.mw-glossary-article__back:hover,
.mw-glossary-article__archive:hover {
  text-decoration: underline;
}

/* ============================================================
   Phase 2-J: CTA + 法令対応関連スタイル
   ============================================================ */
/* ============================================================
   MobilyWise CTA ショートコード スタイル
   ============================================================
   配置: cocoon-child-master/style.css の末尾に追記
   関連: inc/mw-cta-shortcode.php
   設計: Day 3 デザイン(黒 #1A1A1A / シアン #00A8E8 / 背景 #FAFAFA)準拠
   ============================================================ */

/* ベースコンテナ ------------------------------------------------------------- */
.mw-cta {
    position: relative;
    margin: 2.5em auto;
    padding: 1.5em 1.5em 1.25em;
    max-width: 720px;
    background: #FFFFFF;
    border: 2px solid #00A8E8;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 168, 232, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mw-cta:hover {
    box-shadow: 0 8px 20px rgba(0, 168, 232, 0.16);
    transform: translateY(-2px);
}

/* バリアント:primary(デフォルト、強調)----------------------------------- */
.mw-cta--primary {
    background: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%);
}

/* バリアント:secondary(控えめ)------------------------------------------- */
.mw-cta--secondary {
    border-color: #1A1A1A;
    background: #FAFAFA;
}

.mw-cta--secondary .mw-cta__button {
    background: #1A1A1A;
}

.mw-cta--secondary .mw-cta__button:hover {
    background: #333333;
}

/* バリアント:compact(比較表下部などコンパクト)--------------------------- */
.mw-cta--compact {
    margin: 1.5em auto;
    padding: 1em;
    max-width: 480px;
}

.mw-cta--compact .mw-cta__title {
    font-size: 1em;
}

/* PR バッジ ----------------------------------------------------------------- */
.mw-cta__badge {
    position: absolute;
    top: -10px;
    left: 16px;
    padding: 2px 10px;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 3px;
    color: #FFFFFF;
    z-index: 1;
}

.mw-cta__badge--pr {
    background: #999999;
}

.mw-cta__badge--new {
    background: #E8341C;
}

.mw-cta__badge--recommend {
    background: #00A8E8;
}

/* メインボタン ------------------------------------------------------------- */
.mw-cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    padding: 0.85em 1.25em;
    background: #00A8E8;
    color: #FFFFFF !important;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    border-radius: 6px;
    transition: background 0.2s ease;
    flex-wrap: wrap;
}

.mw-cta__button:hover {
    background: #0089BD;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.mw-cta__title {
    font-size: 1.05em;
    line-height: 1.4;
}

.mw-cta__subtitle {
    display: block;
    width: 100%;
    margin-top: 0.35em;
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.95;
}

.mw-cta__arrow {
    font-size: 1.2em;
    transition: transform 0.2s ease;
}

.mw-cta__button:hover .mw-cta__arrow {
    transform: translateX(4px);
}

/* 補足テキスト ------------------------------------------------------------- */
.mw-cta__note {
    margin: 0.75em 0 0;
    text-align: center;
    font-size: 0.8em;
    color: #666666;
}

/* スマホ最適化 ------------------------------------------------------------- */
@media (max-width: 600px) {
    .mw-cta {
        margin: 2em auto;
        padding: 1.25em 1em 1em;
    }

    .mw-cta__button {
        padding: 0.85em 1em;
    }

    .mw-cta__title {
        font-size: 1em;
    }

    .mw-cta__arrow {
        font-size: 1.1em;
    }
}

/* ============================================================
   比較表内 CTA ボタン(mw_cta_btn)
   ============================================================ */
.mw-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 1em;
    background: #00A8E8;
    color: #FFFFFF !important;
    font-size: 0.9em;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.mw-cta-btn:hover {
    background: #0089BD;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.mw-cta-btn__badge {
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    font-size: 0.75em;
    letter-spacing: 0.05em;
}

/* ============================================================
   記事冒頭 PR 表記(Phase 2-J.3 で使用)
   ============================================================ */
.mw-pr-disclosure {
    margin: 0 0 1.5em;
    padding: 0.5em 0.85em;
    font-size: 0.8em;
    color: #666666;
    background: #F5F5F5;
    border-left: 3px solid #999999;
    border-radius: 0 3px 3px 0;
}

/* ============================================================
   記事末尾の注意書きボックス(Phase 2-J.1 で使用)
   ============================================================ */
.mw-article-notice {
    margin: 3em 0 1.5em;
    padding: 1em 1.25em;
    font-size: 0.85em;
    line-height: 1.7;
    color: #555555;
    background: #F8F8F8;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
}

/* ============================================================
   MobilyWise グローバル装飾 CSS(Phase 2-K)
   ============================================================
   配置: cocoon-child-master/style.css の末尾に追記
   設計: 黒 #1A1A1A / シアン #00A8E8 / 背景 #FAFAFA
   方向性: 東洋経済オンライン参考のジャーナリズム調
   既存実装(Phase 2-J の CTA / PR 表記 / 注意書き)と衝突しない
   ============================================================ */

/* ============================================================
   1. 強調系:本文中の <strong>, <mark>, .mw-keyword
   ============================================================ */

/* <strong> タグの装飾(全記事に自動適用) */
.entry-content strong,
.article-body strong {
    color: #1A1A1A;
    font-weight: 700;
    background: linear-gradient(transparent 65%, rgba(0, 168, 232, 0.18) 65%);
    padding: 0 2px;
}

/* <mark> タグのハイライト */
.entry-content mark,
.article-body mark {
    background: linear-gradient(transparent 60%, #FFEB3B 60%);
    color: #1A1A1A;
    padding: 0 3px;
    font-weight: 600;
}

/* 重要キーワード強調(手動付与クラス) */
.mw-keyword {
    background: linear-gradient(transparent 55%, rgba(0, 168, 232, 0.35) 55%);
    color: #1A1A1A;
    font-weight: 700;
    padding: 0 4px;
}

/* 数値強調(価格・パーセント等の重要数値) */
.mw-num {
    color: #E8341C;
    font-weight: 700;
    font-size: 1.05em;
}

/* ============================================================
   2. ブロック系:情報を箱で囲む
   ============================================================ */

/* (a) ポイント枠 */
.mw-box-point {
    position: relative;
    margin: 1.5em 0;
    padding: 1em 1.25em 1em 3.25em;
    background: #F0F9FF;
    border: 1px solid #00A8E8;
    border-left: 4px solid #00A8E8;
    border-radius: 0 6px 6px 0;
    line-height: 1.8;
}

.mw-box-point::before {
    content: "POINT";
    position: absolute;
    top: 0.85em;
    left: 1em;
    font-size: 0.7em;
    font-weight: 700;
    color: #00A8E8;
    letter-spacing: 0.05em;
    line-height: 1;
}

.mw-box-point > *:first-child {
    margin-top: 0;
}
.mw-box-point > *:last-child {
    margin-bottom: 0;
}

/* (b) 補足枠 */
.mw-box-note {
    margin: 1.5em 0;
    padding: 0.85em 1.25em;
    background: #F5F5F5;
    border-left: 4px solid #999999;
    border-radius: 0 6px 6px 0;
    color: #555555;
    font-size: 0.95em;
    line-height: 1.8;
}

.mw-box-note > *:first-child {
    margin-top: 0;
}
.mw-box-note > *:last-child {
    margin-bottom: 0;
}

/* (c) 注意枠 */
.mw-box-warn {
    position: relative;
    margin: 1.5em 0;
    padding: 1em 1.25em 1em 3.25em;
    background: #FFF8E1;
    border: 1px solid #F9A825;
    border-left: 4px solid #F9A825;
    border-radius: 0 6px 6px 0;
    line-height: 1.8;
}

.mw-box-warn::before {
    content: "注意";
    position: absolute;
    top: 0.85em;
    left: 1em;
    padding: 1px 6px;
    background: #F9A825;
    color: #FFFFFF;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
    border-radius: 3px;
}

.mw-box-warn > *:first-child {
    margin-top: 0;
}
.mw-box-warn > *:last-child {
    margin-bottom: 0;
}

/* (d) まとめ枠 */
.mw-box-summary {
    margin: 2em 0;
    padding: 1.5em 1.5em 1.25em;
    background: #1A1A1A;
    color: #FFFFFF;
    border-radius: 8px;
    line-height: 1.85;
}

.mw-box-summary > *:first-child {
    margin-top: 0;
}
.mw-box-summary > *:last-child {
    margin-bottom: 0;
}

.mw-box-summary h3,
.mw-box-summary h4 {
    margin: 0 0 0.75em;
    padding: 0;
    color: #00A8E8;
    border: none;
    font-size: 1.15em;
}

.mw-box-summary ul,
.mw-box-summary ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.mw-box-summary a {
    color: #FFEB3B;
    text-decoration: underline;
}

.mw-box-summary strong {
    color: #FFFFFF;
    background: none;
}

/* ============================================================
   3. 引用・リスト系
   ============================================================ */

/* blockquote 整形(注:Phase 2-J.1 で `[本記事は...]` の引用は末尾移動済み) */
.entry-content blockquote,
.article-body blockquote {
    position: relative;
    margin: 1.5em 0;
    padding: 1em 1.25em 1em 3em;
    background: #FAFAFA;
    border-left: 4px solid #1A1A1A;
    color: #333333;
    font-style: normal;
    line-height: 1.85;
}

.entry-content blockquote::before,
.article-body blockquote::before {
    content: "“";
    position: absolute;
    top: -0.1em;
    left: 0.5em;
    font-size: 2.5em;
    color: #00A8E8;
    line-height: 1;
    font-family: Georgia, serif;
}

.entry-content blockquote > *:first-child,
.article-body blockquote > *:first-child {
    margin-top: 0;
}
.entry-content blockquote > *:last-child,
.article-body blockquote > *:last-child {
    margin-bottom: 0;
}

/* 番号付きリスト:シアン丸数字 */
.entry-content ol,
.article-body ol {
    counter-reset: mw-ol-counter;
    list-style: none;
    padding-left: 0;
}

.entry-content ol > li,
.article-body ol > li {
    counter-increment: mw-ol-counter;
    position: relative;
    padding: 0.25em 0 0.5em 2.25em;
    margin-bottom: 0.4em;
    line-height: 1.8;
}

.entry-content ol > li::before,
.article-body ol > li::before {
    content: counter(mw-ol-counter);
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    background: #00A8E8;
    color: #FFFFFF;
    font-size: 0.85em;
    font-weight: 700;
    border-radius: 50%;
}

/* 入れ子の ol(2層目以降は標準デザインに戻す) */
.entry-content ol ol,
.article-body ol ol {
    counter-reset: mw-ol-sub;
    margin-top: 0.5em;
}

.entry-content ol ol > li::before,
.article-body ol ol > li::before {
    content: counter(mw-ol-sub, lower-alpha);
    background: #999999;
}

/* 順序なしリスト:控えめなチェック調マーカー */
.entry-content ul,
.article-body ul {
    list-style: none;
    padding-left: 0;
}

.entry-content ul > li,
.article-body ul > li {
    position: relative;
    padding: 0.15em 0 0.3em 1.5em;
    line-height: 1.8;
}

.entry-content ul > li::before,
.article-body ul > li::before {
    content: "";
    position: absolute;
    left: 0.35em;
    top: 0.85em;
    width: 0.5em;
    height: 0.5em;
    background: #00A8E8;
    border-radius: 50%;
}

/* 入れ子の ul */
.entry-content ul ul > li::before,
.article-body ul ul > li::before {
    background: transparent;
    border: 1.5px solid #00A8E8;
}

/* ============================================================
   4. リンク系
   ============================================================ */

/* 本文内の内部リンク */
.entry-content a:not([class]),
.article-body a:not([class]) {
    color: #0089BD;
    text-decoration: underline;
    text-decoration-color: rgba(0, 168, 232, 0.4);
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.entry-content a:not([class]):hover,
.article-body a:not([class]):hover {
    color: #00A8E8;
    text-decoration-color: #00A8E8;
}

/* 外部リンク(target="_blank" を持つもの)に小さい矢印 */
.entry-content a:not([class])[target="_blank"]::after,
.article-body a:not([class])[target="_blank"]::after {
    content: "↗";
    display: inline-block;
    margin-left: 0.15em;
    font-size: 0.85em;
    color: #999999;
    transform: translateY(-1px);
}

/* ============================================================
   5. 見出し補強(Cocoon 標準を尊重しつつ微調整)
   ============================================================ */

/* h2 の左ボーダー(本文構造の視認性向上) */
.entry-content h2,
.article-body h2 {
    position: relative;
    padding: 0.5em 0 0.5em 0.85em;
    border-left: 6px solid #00A8E8;
    border-bottom: 1px solid #E0E0E0;
}

/* h3 はシアンの下線 */
.entry-content h3,
.article-body h3 {
    padding: 0.35em 0 0.35em 0;
    border-bottom: 2px solid #00A8E8;
}

/* h4 は左の細い縦棒 */
.entry-content h4,
.article-body h4 {
    padding: 0 0 0 0.65em;
    border-left: 3px solid #1A1A1A;
}

/* ============================================================
   6. テーブル装飾(比較表用)
   ============================================================ */

.entry-content table,
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95em;
}

.entry-content table th,
.article-body table th {
    padding: 0.6em 0.85em;
    background: #1A1A1A;
    color: #FFFFFF;
    font-weight: 700;
    text-align: left;
    border: 1px solid #1A1A1A;
}

.entry-content table td,
.article-body table td {
    padding: 0.6em 0.85em;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

.entry-content table tr:nth-child(even) td,
.article-body table tr:nth-child(even) td {
    background: #F8F8F8;
}

/* スマホ幅でのテーブル横スクロール */
@media (max-width: 600px) {
    .entry-content table,
    .article-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   7. SNS シェアボタン非表示(全箇所)
   ============================================================
   理由: SNS アカウント未開設のため、3箇所すべて非表示
   念のため CSS でフォールバック(Cocoon 設定でも OFF にする)
   ============================================================ */

/* 記事タイトル下のシェアボタン */
.sns-share,
.share,
.sns-share-buttons,
div.sns-share-message,
.sns-share-top {
    display: none !important;
}

/* 記事末尾のシェアボタン */
.sns-share-bottom,
.share-bottom {
    display: none !important;
}

/* 左側追従シェアボタン(PC) */
.sns-share-fixed-left,
.fixed-share-left,
#fixed-sns-share {
    display: none !important;
}

/* フォロー系ボタン(SNS フォロー誘導)も非表示 */
.sns-follow,
.follow-buttons {
    display: none !important;
}

/* ============================================================
   8. スマホ最適化(本文の可読性)
   ============================================================ */

@media (max-width: 600px) {
    .mw-box-point,
    .mw-box-warn {
        padding: 1em 1em 1em 2.85em;
    }

    .mw-box-summary {
        margin: 1.5em 0;
        padding: 1.25em;
    }

    .entry-content h2,
    .article-body h2 {
        padding-left: 0.65em;
        border-left-width: 5px;
    }

    .entry-content ol > li,
    .article-body ol > li {
        padding-left: 2em;
    }
}

/* ============================================================
   9. アクセシビリティ:フォーカス可視化
   ============================================================ */

.entry-content a:focus,
.article-body a:focus,
.mw-cta__button:focus,
.mw-cta-btn:focus {
    outline: 2px solid #00A8E8;
    outline-offset: 2px;
}

/* ============================================================
   10. 印刷時のスタイル
   ============================================================ */

@media print {
    .sns-share,
    .sns-share-bottom,
    .sns-share-fixed-left,
    .mw-cta,
    .mw-pr-disclosure {
        display: none !important;
    }
}

/* ============================================================
   MobilyWise ヘッダー改修(2026-05-10 / Stage2 v2-recovery)
   v1: ロゴ + PC左右配置 + スマホ2段ヘッダー + カテゴリタブ + オーバーレイ
   v2: PC ロゴ高さズレ修正 + プロフィール CTA 削除(コメントアウト残置)
   v2-recovery: #header-in の flex 化を解除して親テーマ .hlt-top-menu flex に
                 完全委譲。box-shadow も削除し、視覚的な中心軸ノイズを排除
   ============================================================ */

/* ===== PC ヘッダー(min-width: 1024px / v2-recovery: #header-in の flex 化を解除して親テーマ flex に完全委譲) ===== */
/*
 * Cocoon 実際の HTML 構造:
 *   .header-container-in.hlt-top-menu (親テーマで display:flex; align-items:center 設定済み)
 *     └── #header.header          ← ロゴのみ
 *           └── #header-in.wrap   ← ロゴのみ(flex 化しない)
 *     └── #navi.navi              ← ナビ(#header-in の外・兄弟要素)
 * ★ ロゴ縦中央配置は親テーマ .hlt-top-menu の flex に任せる
 *   #header-in を flex 化すると入れ子 flex で挙動不安定 → 本リカバリで解除
 */
@media screen and (min-width: 1024px) {

  /* ヘッダー枠線(box-shadow は中心軸ノイズになるため削除) */
  .header-container {
    border-bottom: 1px solid #e0e0e0;
  }

  #header.header {
    padding: 0;
    background: transparent;
  }

  /* ★ ロゴ + ナビ の共通親コンテナ
   *   親テーマが display:flex; align-items:center を設定済み
   *   ここで高さを固定するだけで ロゴとナビが縦中央で揃う */
  .header-container-in.hlt-top-menu {
    height: 70px !important;
    box-sizing: border-box;
  }

  /* #header-in: 親テーマ flex に委譲、自身は flex 化しない
   *   line-height:0 で画像 baseline 由来の余白を排除 */
  #header-in,
  #header-in.header-in {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 0 !important;
  }

  /* キャッチフレーズ非表示 */
  #header-in .tagline {
    display: none !important;
  }

  /* ロゴコンテナ: 子テーマ共通 CSS の padding を PC では 0 にリセット
   *   display:flex は付けない(親 flex の中央配置に任せる) */
  #header .logo-header,
  #header .logo-image,
  #header-in .logo-header,
  #header-in .logo-image {
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
  }

  /* ロゴ <a>: シンプルに block + line-height:0 */
  #header .logo-header a,
  #header-in .logo-header a {
    display: block;
    line-height: 0;
    margin: 0;
    padding: 0;
  }

  /* ロゴ画像: 36px 固定
   * 競合ルール(いずれも本ルールが !important で勝つ):
   *   - 子テーマ早期ブロック: .header-container .logo-image img { height:60px }
   *   - 親テーマ: .hlt-top-menu .logo-header img { max-height:60px; height:auto }
   */
  #header-in .logo-header img,
  #header .logo-header img,
  #header .logo-image img {
    height: 36px !important;
    width: auto !important;
    max-height: none !important;
    display: block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PC ナビゲーション */
  #navi {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    height: 70px;
  }

  /* PC では menu-mobile を非表示 */
  #navi .menu-mobile,
  #navi .mw-menu-mobile {
    display: none !important;
  }

  #navi .navi-in {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 4px;
    background: transparent;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 70px;
    width: 100%;
  }

  #navi .menu-header,
  #navi .menu-pc {
    display: flex !important;
    align-items: center !important;
    height: 70px;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0;
  }

  #navi .menu-header > li,
  #navi .menu-pc > li {
    margin: 0;
    border: none;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    height: 70px;
  }

  #navi .menu-header > li > a,
  #navi .menu-pc > li > a {
    padding: 0 14px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s;
    border: none;
    background: transparent;
    white-space: nowrap;
    display: flex !important;
    align-items: center !important;
    height: 70px;
    line-height: 1;
  }

  #navi .menu-header > li > a:hover,
  #navi .menu-pc > li > a:hover {
    color: #00A8E8;
    background: transparent;
  }

  /*
   * プロフィール CTA 将来復活用(コメントアウト残置)
   *
   * #navi .header-cta { margin-left: 16px; flex-shrink: 0; }
   * #navi .header-cta a { display: inline-block; padding: 10px 22px;
   *   border: 1.5px solid #1a1a1a; border-radius: 4px; color: #1a1a1a;
   *   font-size: 14px; font-weight: 600; text-decoration: none;
   *   line-height: 1; transition: all 0.2s; white-space: nowrap; }
   * #navi .header-cta a:hover { background: #1a1a1a; color: #fff; }
   */

  /* PC ではカテゴリタブとハンバーガーを非表示 */
  .mw-category-tabs-outer,
  .mw-category-tabs,
  .mw-mobile-menu-toggle {
    display: none !important;
  }
}

/* ===== モバイル ヘッダー(max-width: 1023px)2段構成 ===== */
@media screen and (max-width: 1023px) {

  #header.header {
    padding: 0;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    height: auto; /* 2段構成 */
  }

  /* 1段目: ロゴ左 + ハンバーガー右 */
  #header-in.header-in {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    padding: 0 16px;
    height: 56px;
    max-width: 100%;
    background: #ffffff;
    margin: 0 auto;
  }

  /* ロゴ左寄せ強制(中央配置の打ち消し) */
  #header-in .logo-header {
    margin: 0 !important;
    text-align: left !important;
    padding: 0;
    line-height: 1;
    flex: 0 0 auto;
  }

  #header-in .logo-header a {
    display: block;
    line-height: 1;
  }

  #header-in .logo-header img.site-logo-image {
    height: 30px;
    width: auto;
    max-width: 200px;
    display: block;
  }

  /* キャッチフレーズはモバイルでも非表示 */
  #header-in .tagline,
  .site-description {
    display: none !important;
  }

  /* PC ナビは非表示(モバイルではオーバーレイメニューを使用) */
  #navi.navi {
    display: none !important;
  }

  /* Cocoon のモバイル 2x2 グリッド/フッター固定メニュー強制非表示 */
  .navi-footer-mobile,
  #navi-footer-mobile,
  .mobile-menu-buttons,
  .mobile-footer-menu-buttons,
  .navi-footer {
    display: none !important;
  }

  /* ハンバーガーボタン(子テーマで JS 挿入する独自ボタン) */
  .mw-mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0 !important;
    color: #1a1a1a;
    flex: 0 0 auto;
  }

  .mw-mobile-menu-toggle .mw-hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #1a1a1a;
    position: relative;
  }

  .mw-mobile-menu-toggle .mw-hamburger-bar::before,
  .mw-mobile-menu-toggle .mw-hamburger-bar::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: #1a1a1a;
    position: absolute;
    left: 0;
  }

  .mw-mobile-menu-toggle .mw-hamburger-bar::before { top: -8px; }
  .mw-mobile-menu-toggle .mw-hamburger-bar::after  { top:  8px; }

  /* ===== 2段目: カテゴリタブ外枠(スクロール示唆グラデーション用ラッパー) ===== */
  .mw-category-tabs-outer {
    position: relative;
  }

  /* 右端フェードアウト → 横スクロール可能なことをユーザーにヒント */
  .mw-category-tabs-outer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(to right, transparent, #ffffff);
    pointer-events: none;
    z-index: 2;
  }

  /* ===== 2段目: カテゴリタブ(横スクロール) ===== */
  .mw-category-tabs {
    display: block;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  .mw-category-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .mw-category-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .mw-category-tabs li {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border: none;
  }

  .mw-category-tabs a {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    line-height: 1;
    min-height: 44px;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .mw-category-tabs a:hover,
  .mw-category-tabs a:active {
    color: #00A8E8;
  }

  .mw-category-tabs li.is-current a,
  .mw-category-tabs a.is-current {
    color: #00A8E8;
    border-bottom-color: #00A8E8;
  }
}

/* ===== モバイル全画面オーバーレイメニュー ===== */
.mw-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.98);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.25s ease;
  overflow-y: auto;
}

.mw-mobile-overlay.is-open {
  display: block;
  opacity: 1;
}

.mw-mobile-overlay__inner {
  padding: 80px 24px 40px;
  max-width: 480px;
  margin: 0 auto;
}

.mw-mobile-overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mw-mobile-overlay li {
  margin: 0;
  padding: 0;
  border: none;
}

.mw-mobile-overlay a {
  display: block;
  padding: 22px 8px;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.2s;
  text-align: center;
}

.mw-mobile-overlay a:hover,
.mw-mobile-overlay a:focus {
  color: #00A8E8;
}

.mw-mobile-overlay__cta {
  margin-top: 32px;
  padding: 0 16px;
}

.mw-mobile-overlay__cta a {
  display: block;
  padding: 16px 24px;
  background: #1a1a1a;
  color: #ffffff !important;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}

.mw-mobile-overlay__cta a:hover {
  background: #00A8E8;
  color: #ffffff !important;
}

.mw-mobile-overlay__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #1a1a1a;
  line-height: 1;
  padding: 0;
}

body.mw-mobile-overlay-open {
  overflow: hidden;
}

/* ============================================== */
/* 2026-05-10 ロゴ中心軸最終パッチ                */
/* h1.logo-header の margin リセット + flex 中央  */
/* ============================================== */
@media screen and (min-width: 1024px) {
  h1.logo-header,
  h1.logo.logo-header,
  h1.logo-image {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 70px !important;
  }

  h1.logo-header a.site-name,
  h1.logo-header a.site-name-text-link,
  h1.logo-header span.site-name-text {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }

  h1.logo-header img.site-logo-image,
  h1.logo-header img.header-site-logo-image {
    height: 40px !important;
    width: auto !important;
    display: block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tagline {
    display: none !important;
  }
}

/* ============================================== */
/* ============================================== */
/* ============================================== */
/* ============================================== */

/* ============================================== */
/* 2026-05-10 最終クリーンアップ                  */
/* ロゴ縦中央修正 + メニュー縦中央 + 項目幅均一   */
/* 修正: padding-top:18px 削除 + 子ページ(p/div)対応 */
/* ============================================== */
@media screen and (min-width: 1024px) {
  /* ロゴ縦中央: padding リセット。h1(TOP) / p・div(子ページ) どちらも対応 */
  h1.logo-header,
  h1.logo.logo-header,
  h1.logo-image,
  p.logo-header,
  p.logo.logo-header,
  p.logo-image,
  div.logo-header,
  .header-in .logo-header,
  .header-container .logo-header {
    display: flex !important;
    align-items: center !important;
    height: 70px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 0 !important;
  }

  /* 子ページ用: a・span も inline-flex で中央寄せ */
  .header-in .logo-header a,
  .header-in .logo-header span.site-name-text,
  .header-container .logo-header a,
  .header-container .logo-header span.site-name-text {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
  }

  /* 子ページ用: ロゴ画像サイズ・位置を統一 */
  .header-in .logo-header img.site-logo-image,
  .header-in .logo-header img.header-site-logo-image,
  .header-container .logo-header img.site-logo-image,
  .header-container .logo-header img.header-site-logo-image {
    display: block !important;
    height: 40px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    vertical-align: middle !important;
  }

  /* navi 全体を 70px 高さの flex で縦中央 */
  body #navi {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 70px !important;
    height: auto !important;
  }

  /* navi-in も flex で縦中央(stretch を上書き) */
  body #navi-in,
  body #navi .navi-in {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: auto !important;
  }

  /* <ul> 右寄せ、項目間 gap */
  body #navi ul.menu-header,
  body #navi-in ul.menu-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body #navi ul.menu-header > li,
  body #navi-in ul.menu-header > li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* <a> 各項目は 140px 固定箱 */
  body #navi #navi-in ul.menu-header > li > a.mw-menu-link,
  body #navi-in ul.menu-header > li > a.mw-menu-link,
  html body .mw-menu-link {
    display: inline-block !important;
    width: 140px !important;
    min-width: 140px !important;
    padding: 14px 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
}
/* ==========================================================================
   MobilyWise [mw_link] アフィリエイトリンク
   ========================================================================== */

.mw-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #00A8E8;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid #00A8E8;
  padding: 1px 0;
  transition: opacity 0.2s ease;
  line-height: 1.4;
}

.mw-link:hover {
  opacity: 0.7;
  color: #00A8E8;
}

.mw-link__badge {
  display: inline-block;
  background: #00A8E8;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

.mw-link__arrow {
  font-size: 14px;
  font-weight: 400;
  transition: transform 0.2s ease;
}

.mw-link:hover .mw-link__arrow {
  transform: translateX(2px);
}

/* インライン(段落の中)で使う場合の余白 */
p .mw-link {
  margin: 0 2px;
}

/* スタンドアロン(中央寄せブロック)モード */
.mw-link--standalone {
  display: block;
  width: fit-content;
  margin: 24px auto;
  padding: 8px 0;
  font-size: 16px;
}

/* モバイル調整 */
@media (max-width: 640px) {
  .mw-link--standalone {
    font-size: 15px;
    margin: 20px auto;
  }
  .mw-link__badge {
    font-size: 9px;
  }
}

/* ============================================================
   ★Lv.2 動線整備 (2026-05-12) — ヘッダー CTA は撤去 (2026-05-12 夜)
   PC ヘッダー CTA(.mw-header-cta-simulator)関連スタイルは恒久撤去。
   理由: Cocoon 親テーマの .navi-in > ul li(176×60 固定)と .navi-in a(width/height:100%,
         color:var(--cocoon-text-color))との優先度競合で再発リスクが残るため。
   代替動線(維持):
     - SP : .mw-mobile-sticky-cta(固定バー)
     - PC : .mw-promo-simulator(トップFV)/ .mw-inline-promo-simulator(通信記事冒頭)
   ============================================================ */

/* --- トップFV シミュレーター誘導セクション(EDITOR'S PICK 直前) --- */
.mw-promo-simulator {
    margin: 3em auto;
    max-width: 1080px;
    padding: 0 1em;
}

.mw-promo-simulator__inner {
    position: relative;
    background: linear-gradient(135deg, #1A1A1A 0%, #00A8E8 100%);
    color: #FFFFFF;
    border-radius: 16px;
    padding: 3em 2em;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 168, 232, 0.15);
    overflow: hidden;
}

.mw-promo-simulator__inner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.mw-promo-simulator__badge {
    display: inline-block;
    padding: 4px 14px;
    margin-bottom: 1em;
    background: #FFFFFF;
    color: #00A8E8;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 3px;
}

.mw-promo-simulator__title {
    margin: 0 0 0.75em;
    font-size: 1.8em;
    font-weight: 700;
    color: #FFFFFF !important;
    line-height: 1.4;
}

.mw-promo-simulator__lead {
    margin: 0 0 1.5em;
    font-size: 1em;
    line-height: 1.8;
    color: rgba(255,255,255,0.95);
}

.mw-promo-simulator__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 1em 2em;
    background: #FFFFFF;
    color: #00A8E8 !important;
    font-size: 1.1em;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
}

.mw-promo-simulator__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    color: #00A8E8 !important;
}

.mw-promo-simulator__arrow {
    font-size: 1.3em;
    transition: transform 0.15s ease;
}

.mw-promo-simulator__cta:hover .mw-promo-simulator__arrow {
    transform: translateX(4px);
}

.mw-promo-simulator__note {
    margin: 1.25em 0 0;
    font-size: 0.82em;
    color: rgba(255,255,255,0.75);
}

@media (max-width: 768px) {
    .mw-promo-simulator__inner {
        padding: 2em 1.5em;
    }
    .mw-promo-simulator__title {
        font-size: 1.4em;
    }
    .mw-promo-simulator__lead {
        font-size: 0.9em;
    }
    .mw-promo-simulator__cta {
        width: 100%;
        justify-content: center;
        padding: 0.9em 1.5em;
        font-size: 1em;
    }
}

/* --- 通信カテゴリ記事冒頭のシミュレーター誘導バナー(the_content フィルタ自動挿入) --- */
.mw-inline-promo-simulator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin: 0 0 2em;
    padding: 1.25em 1.5em;
    background: linear-gradient(90deg, #E5F5FE 0%, #FFFFFF 100%);
    border: 2px solid #00A8E8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 168, 232, 0.08);
}

.mw-inline-promo-simulator__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.mw-inline-promo-simulator__heading {
    font-size: 1.05em;
    font-weight: 700;
    color: #1A1A1A;
}

.mw-inline-promo-simulator__sub {
    font-size: 0.85em;
    color: #555555;
}

.mw-inline-promo-simulator__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.75em 1.5em;
    background: #00A8E8;
    color: #FFFFFF !important;
    font-size: 0.95em;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 999px;
    transition: all 0.15s ease;
}

.mw-inline-promo-simulator__cta:hover {
    background: #0089BD;
    color: #FFFFFF !important;
    transform: translateX(2px);
}

@media (max-width: 600px) {
    .mw-inline-promo-simulator {
        flex-direction: column;
        align-items: stretch;
        padding: 1em 1.25em;
    }
    .mw-inline-promo-simulator__cta {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   ★ヘッダー CTA(.mw-header-cta-simulator)関連スタイル一式 — 撤去 (2026-05-12 夜)
   Cocoon 親テーマ .navi-in > ul li / .navi-in a との CSS 競合で表示崩れが恒久化、
   高詳細度上書きによる修正は Cocoon 更新で再発リスクが残るため、PC ヘッダー CTA を
   完全撤去。具体的に撤去したブロック:
     - 緊急修正版: .navi-in > ul li.header-cta-simulator / .navi-in a.mw-header-cta-simulator
                  / :hover / __icon / __text
     - 段階1 統合版: @media (max-width: 768px) で SP 完全非表示の display:none !important
   代替動線(維持・撤去対象外):
     - SP : .mw-mobile-sticky-cta(固定バー)
     - PC : .mw-promo-simulator(トップFV)/ .mw-inline-promo-simulator(通信記事冒頭)
   ============================================================ */

/* ============================================================
   ★段階2 (2026-05-12 夜) モバイル用 固定 CTA バー
   配置: wp_footer で注入、PC では非表示、SP のみ画面下固定で出現
   ============================================================ */
.mw-mobile-sticky-cta {
    display: none; /* デフォルト非表示、SP のみ display:flex で表示 */
}

@media (max-width: 768px) {
    .mw-mobile-sticky-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        padding: 0.6em 0.8em;
        background: rgba(26, 26, 26, 0.96);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
        align-items: center;
        gap: 0.5em;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .mw-mobile-sticky-cta--visible {
        transform: translateY(0);
    }

    .mw-mobile-sticky-cta[hidden] {
        display: none !important;
    }

    .mw-mobile-sticky-cta__link {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4em;
        padding: 0.85em 1em;
        background: linear-gradient(135deg, #00A8E8 0%, #0089BD 100%);
        color: #FFFFFF !important;
        font-size: 0.95em;
        font-weight: 700;
        border-radius: 999px;
        text-decoration: none !important;
        box-shadow: 0 2px 8px rgba(0, 168, 232, 0.4);
        transition: transform 0.15s ease;
    }

    .mw-mobile-sticky-cta__link:active {
        transform: scale(0.97);
    }

    .mw-mobile-sticky-cta__icon {
        font-size: 1.1em;
    }

    .mw-mobile-sticky-cta__text {
        white-space: nowrap;
    }

    .mw-mobile-sticky-cta__arrow {
        font-size: 1.15em;
        margin-left: 0.2em;
    }

    .mw-mobile-sticky-cta__close {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        background: rgba(255, 255, 255, 0.12);
        border: none;
        border-radius: 50%;
        color: #FFFFFF;
        font-size: 1.2em;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease;
    }

    .mw-mobile-sticky-cta__close:hover,
    .mw-mobile-sticky-cta__close:active {
        background: rgba(255, 255, 255, 0.25);
    }

    .mw-mobile-sticky-cta__close:focus {
        outline: 2px solid #00A8E8;
        outline-offset: 2px;
    }

    /* SP の本文最下部にスペース確保(固定バーで隠れる分) */
    body {
        padding-bottom: 70px;
    }
}

@media (max-width: 380px) {
    .mw-mobile-sticky-cta__text {
        font-size: 0.85em;
    }
    .mw-mobile-sticky-cta__close {
        width: 32px;
        height: 32px;
    }
}