@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

@import url("../cocoon/style.css");



/* ヘッダー行を2カラム化：左=max-content(ロゴ), 右=余白いっぱい(メニュー) */
#header-container .header-in.wrap.cf.nmj-header-in{
  display:grid !important;
  grid-template-columns: max-content 1fr !important;
  align-items:center !important;
  column-gap:16px;
  /* ▼ガター反映（背景は全幅のまま、中身だけ左右余白） */
  padding-left:  var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
  box-sizing: border-box;
  width: 100%;
}

/* --- SPでは .header-in を非表示 --- */
@media (max-width: 767.98px){
 #header-container.nmj-header{ display:none !important; }
}

/* ロゴ列は中身のサイズで収まるように（Cocoonの幅100%を打消し） */
#header-container .nmj-brand{ display:inline-flex !important; align-items:center; min-width:0; }
#header-container .nmj-brand .logo-header{
  width:auto !important;      /* ← これで100%を無効化 */
  margin:0 !important;
  text-align:left !important;
}
#header-container .nmj-brand .site-name{ white-space:nowrap; }

/* メニュー列は右寄せ */
#header-container .nmj-navwrap{ justify-self:end; min-width:0; }
#header-container .nmj-navwrap .navi{
  width:auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
}
#header-container .nmj-navwrap .navi-in > ul{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-end !important;
  align-items:center;
  gap:8px;
  margin:0; padding:0;
}
#header-container .nmj-navwrap .navi-in > ul > li{ width:auto !important; height:auto !important; }
#header-container .nmj-navwrap .navi-in > ul > li > a{
  display:flex; align-items:center; gap:6px;
  padding:.6rem .8rem; height:auto; text-decoration:none;
  color:#0f172a !important;
}
#header-container .nmj-navwrap .navi-in > ul > li > a:hover{
  background:#f5f8fa !important; color:#0f172a !important;
}

/* 右端CTA（メニュー最後の項目をボタン化） */
#header-container .nmj-navwrap .navi-in > ul > li:last-child > a{
  border-radius:9999px; padding:.55rem 1rem; font-weight:800;
  background:linear-gradient(135deg,#FF7A1A,#FFCC00);
  color:#fff !important; box-shadow:0 6px 18px rgba(255,122,26,.25);
}
#header-container .nmj-navwrap .navi-in > ul > li:last-child > a:hover{
  filter:brightness(.96); transform:translateY(-1px);
}

/* 旧：別行の黒帯ナビがどこかで出ても非表示に（PC） */
#header-container-in > .navi{ display:none !important; }

/* ロゴ画像の高さ */
#header-container .logo-header img{ max-height:60px; height:auto; }

/* 左ブロック：ロゴ → サイト名 → キャッチフレーズ の縦配置（見出し大） */
#header-container .nmj-brand{ display:flex; align-items:center; gap:12px; }
#header-container .nmj-logo img{ max-height:60px; height:auto; }
#header-container .nmj-brand-text{
  display:flex !important; flex-direction:column !important;
  align-items:flex-start; gap:4px;
}
#header-container .nmj-site-name a{
  font-weight:900; font-size:22px; line-height:1.15; color:#0f172a; text-decoration:none;
}
#header-container .nmj-tagline{
  display:block !important; font-size:12px; line-height:1.35; color:#64748b; margin-top:2px;
}

/* Cocoonが .logo-header を幅100%にする影響を無効化（念のため） */
#header-container .logo-header{ width:auto !important; margin:0 !important; }

/* —— スマホ表示（メニュー＋アイコン＋CTAを1行で見せる） ——— */
@media (max-width: 960px){
  /* ロゴをさらに少しだけ小さく */
  #header-container .nmj-logo img{max-height:40px}
  /* サイト名は読みやすく少しだけ縮小 */
  #header-container .nmj-site-name a{font-size:20px}

  /* メニュー行は横スクロール可、折り返さない */
  .nmj-header .navi-in>ul{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; gap:6px;
  }
  .nmj-header .navi-in>ul>li{flex:0 0 auto} /* タブ状に連なる */
  .nmj-header .navi-in>ul>li>a{padding:.5rem .7rem}

  /* CTAが常に右端に来るよう、左余白を自動で押し出し */
  .nmj-header .navi-in>ul{scroll-padding-right:12px}
  .nmj-header .navi-in>ul>li:last-child{margin-left:auto}

  /* タグラインは省スペースのため非表示（必要なら削除） */
  #header-container .nmj-tagline{display:none}
}

/* ========= PC表示（>=961px） ========= */
@media (min-width: 961px){
  /* 旧：黒帯ナビ（header直後に出る .navi）を隠す */
  #header-container-in > .navi{ display:none !important; }
  /* PC用ナビ（ヘッダー右側）は表示 */
  .nmj-header .nmj-navwrap.nmj-nav--pc{ display:block !important; }
  /* 念のため、SP用の余計な包みは消す */
  .nmj-nav--sp{ display:none !important; }
}

/* ========= スマホ表示（<=960px） ========= */
/* スマホはCocoon標準の黒帯ナビを使い、ヘッダー内ナビは隠す */
@media (max-width: 960px){
  /* ヘッダー右側のPC用ナビを隠す */
  .nmj-header .nmj-navwrap.nmj-nav--pc{ display:none !important; }
  /* 旧：黒帯ナビを表示（Cocoonの初期どおり）＋ ガター適用 */
  #header-container-in > .navi{
    display:block !important;
    background:#000; /* テーマ既定の黒帯を維持したい場合だけ */
  }
  #header-container-in > .navi .navi-in{
    padding-left:  var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
    box-sizing: border-box;
  }

  /* （もし nmj-nav--sp を出しているなら重複防止で隠す） */
  .nmj-nav--sp{ display:none !important; }
}

/* =========================
   1) ヘッダー固定（PC/SP共通）
   ========================= */
#header-container.nmj-header{
  position: sticky;      /* 常に上に張り付く */
  top: 0;
  z-index: 9999;
  background:#fff;
  box-shadow: 0 2px 14px rgba(15,23,42,.06);
}
.admin-bar #header-container.nmj-header{ top: 32px; } /* WP管理バー対策 */

/* =========================================
   3) CTA（右端メニュー）を少し大きく
   ========================================= */
#header-container .nmj-navwrap .navi-in > ul > li:last-child > a{
  padding: .75rem 1.25rem !important;   /* ← サイズUP */
  font-size: 15px;
  border-radius: 9999px;
  background: linear-gradient(135deg,#FF7A1A,#FFCC00);
  color:#fff !important;
  box-shadow: 0 6px 18px rgba(255,122,26,.25);
}
#header-container .nmj-navwrap .navi-in > ul > li:last-child > a:hover{
  filter: brightness(.96);
  transform: translateY(-1px);
}

/* テーマ既定を尊重。必要ならフルワイド時だけ調整 */
body.no-sidebar:root,
body.wide:root,
body.full-wide:root{
  /* 例：ガターを少し広げたい時だけ */
  --page-gutter: 16px;
}

/* === フルワイド（サイドバー無し）のページだけ全幅化 === */
body.no-sidebar,
body.wide,
body.full-wide {
  /* Tailwind container の最大幅を解除（本文のみ） */
  /* 既存 HTML では .content-scope を本文ラッパに使っているためそこに限定 */
}
body.no-sidebar .content-scope,
body.wide .content-scope,
body.full-wide .content-scope {
  width:100% !important;
  max-width:none !important;
}

/* パディングの上書きも “フルワイドページの本文ラッパ内” だけ */
body.no-sidebar .content-scope .px-4,
body.wide .content-scope .px-4,
body.full-wide .content-scope .px-4{
  padding-left:var(--page-gutter) !important;
  padding-right:var(--page-gutter) !important;
}
@media (min-width:640px){
  body.no-sidebar .content-scope .sm\:px-6,
  body.wide .content-scope .sm\:px-6,
  body.full-wide .content-scope .sm\:px-6{
    padding-left:var(--page-gutter) !important;
    padding-right:var(--page-gutter) !important;
  }
}
@media (min-width:1024px){
  body.no-sidebar .content-scope .lg\:px-8,
  body.wide .content-scope .lg\:px-8,
  body.full-wide .content-scope .lg\:px-8{
    padding-left:var(--page-gutter) !important;
    padding-right:var(--page-gutter) !important;
  }
}

/* ★重要：グローバルな main / .entry-content などの幅100% は削除
   （Cocoon の2カラム計算を壊すため） */
/* フルワイド系ページだけヒーローを全幅ブリード */
body.no-sidebar #hero,
body.wide #hero,
body.full-wide #hero{
  /* ビュー幅に“はみ出して”描画する定番テク */
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}


/* 4) 以前の“ヘッダーは余白0に戻す”処理を撤回し、ガター適用に変更 */
.nmj-header .header-in.wrap{
  padding-left:  var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}
.nmj-header .px-4,
.nmj-header .sm\:px-6,
.nmj-header .lg\:px-8{
  padding-left:  var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important; /* ← タイポ修正（!important） */
}

/* ==============================
   A) ヒーロー内のCTA（TOPだけ）
   ============================== */
#hero .btn-cta{
  /* 主CTA：診断をはじめる */
  background-image: linear-gradient(90deg, #FFC46B, #FF8A3D);
  color:#1F2937; /* slate-800 */
  border:0;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
#hero .btn-cta:hover{
  background-image: linear-gradient(90deg, #FFB455, #FF7A2D);
}
#hero .btn-cta:focus{
  outline:0;
  box-shadow:0 0 0 4px #FFD79C; /* amber-200 */
}

#hero .btn-ghost{
  /* 準CTA：結果を見る（白ゴースト） */
  color:#fff;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:saturate(180%) blur(8px);
}
#hero .btn-ghost:hover{ background:rgba(255,255,255,.25); }

/* ==============================
   B) シミュ画面（/simulation 等）
   ここから下は #nmj-sim-v8 配下のみ
   ============================== */
#nmj-sim-v8 .btn-primary,
#nmj-sim-v8 .btn-cta{
  background-image: linear-gradient(90deg, #FFC46B, #FF8A3D);
  color:#1F2937;
  border:0;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
#nmj-sim-v8 .btn-primary:hover,
#nmj-sim-v8 .btn-cta:hover{
  background-image: linear-gradient(90deg, #FFB455, #FF7A2D);
}
#nmj-sim-v8 .btn-primary:focus,
#nmj-sim-v8 .btn-cta:focus{
  outline:0;
  box-shadow:0 0 0 4px #FFD79C;
}

#nmj-sim-v8 .btn-ghost{
  color:#fff;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:saturate(180%) blur(8px);
}
#nmj-sim-v8 .btn-ghost:hover{ background:rgba(255,255,255,.25); }

/* モードチップ（通常＝ニュートラル、選択時＝淡いスカイ） */
#nmj-sim-v8 .mode-chip{
  background:#FFF;
  border:1px solid #E5E7EB; /* slate-200 */
  color:#0F172A;            /* slate-900 */
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
#nmj-sim-v8 .mode-chip svg{ color:#0EA5E9 } /* sky-500 */
#nmj-sim-v8 .mode-chip.active{
  background:#EAF6FF;       /* sky-50 */
  border-color:#BFE3FF;     /* sky-200 */
  color:#0B4A6F;
}

/* 結果カード内の小ボタン（役割分担で配色） */
#nmj-sim-v8 .actions .btn{
  padding:10px 12px; border-radius:10px; font-weight:800;
  transition:filter .15s ease, transform .05s ease;
}
#nmj-sim-v8 .actions .btn:hover{ filter:brightness(.98) }
#nmj-sim-v8 .btn-article{
  background:#EEF2FF; color:#3730A3; border:1px solid #C7D2FE;
}
#nmj-sim-v8 .btn-official{
  background:#ECFEFF; color:#155E75; border:1px solid #A5F3FC;
}
#nmj-sim-v8 .btn-line{
  background:#DCFCE7; color:#166534; border:1px solid #BBF7D0;
}
#nmj-sim-v8 .btn-campaign{
  background:#FFF7ED; color:#9A3412; border:1px solid #FED7AA;
}


/* ================================
   TOPページ（home/front-page）を全幅化
   ※このブロックは必ず一番最後に貼る
   ================================ */

/* 1) TOPだけ “各種ラッパー” の最大幅を解除して 100% に */
body.home,
body.front-page{
  overflow-x: hidden; /* 横スクロール防止 */
}

body.home .wrap,
body.front-page .wrap,
body.home .content-in.wrap,
body.front-page .content-in.wrap,
body.home .header-in.wrap,
body.front-page .header-in.wrap,
body.home .footer-in.wrap,
body.front-page .footer-in.wrap,
body.home .container,
body.front-page .container,
body.home #container,
body.front-page #container,
body.home #main,
body.front-page #main,
body.home .content,
body.front-page .content,
body.home .main,
body.front-page .main,
body.home .l-container,
body.front-page .l-container,
body.home .entry-content,
body.front-page .entry-content,
body.home .article,
body.front-page .article,
body.home .article-body{
  max-width: none !important;
  width: 100% !important;
}

/* 2) “全幅 + 最低限の左右ガター” を TOP だけで付与
   - セクション側に .content-scope が付く想定（あなたのマークアップに合わせてあります）
   - 本当に端までゼロ余白にしたい場合は padding を 0 にしてください */
:root{ --top-gutter: max(12px, env(safe-area-inset-left)); }
body.home  .content-scope,
body.front-page .content-scope{
  padding-left:  var(--top-gutter) !important;
  padding-right: var(--top-gutter) !important;
}

/* 3) .wrap に入っている既定パディングを一旦ゼロに（必要な余白は .content-scope で管理） */
body.home .wrap,
body.front-page .wrap{
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* 4) ヒーローなど “背景を完全に画面端まで” 見せたい要素にフルブリード
   - #hero や .full-bleed を使うブロックはこの指定で全面表示 */
body.home  #hero,
body.front-page #hero,
body.home  .full-bleed,
body.front-page .full-bleed{
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
}

/* 5) 横向き時のセーフエリアも考慮しておく（iOSノッチ対策） */
@media (orientation: landscape){
  body.home  .content-scope,
  body.front-page .content-scope{
    padding-left:  max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
}

/* 6) 既存の「グローバルで1180pxに揃える」指定を TOP だけ確実に打ち消す保険 */
body.home  .wrap,
body.front-page .wrap,
body.home  .container,
body.front-page .container{
  max-width: none !important;
}

/* すべてのページ：フッターは横いっぱいに表示する */
.footer-in.wrap{
  max-width: none !important;   /* 幅制限を解除 */
  width: 100% !important;       /* 画面幅いっぱい */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;   /* 必要なら var(--page-gutter) に変更 */
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
/* =========================================
   共通ページネーション（中央寄せ）
   ========================================= */

/* コンテナ（div.nav-links / ul.page-numbers 両対応） */
.nav-links,
.pagination,
ul.page-numbers{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;  /* 中央寄せ */
  align-items:center;
  gap:8px;
  width:100%;              /* コンテナを行いっぱいに */
  margin:24px auto;        /* 上下余白＋左右中央 */
  padding-left:0;
  text-align:center;
}


/* ul 形式のときの li をリセット */
ul.page-numbers > li{
  list-style:none;
}

/* 個々のリンク「1 / 2 / 3 / … / 次へ」 */
.nav-links .page-numbers,
ul.page-numbers > li > .page-numbers{
  float:none !important;                 /* テーマの float を無効化 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#334155;
  font-weight:700;
  text-decoration:none;
  line-height:1;
  box-shadow:0 4px 10px rgba(15,23,42,.06);
  transition:.15s ease;
}

/* 現在ページ */
.nav-links .page-numbers.current,
ul.page-numbers > li > .page-numbers.current{
  background:linear-gradient(135deg,var(--brand,#FF7A1A),var(--brand-2,#FFCC00));
  border-color:transparent;
  color:#fff;
}

/* ホバー（「…」以外） */
.nav-links .page-numbers:not(.dots):hover,
ul.page-numbers > li > .page-numbers:not(.dots):hover{
  border-color:#ffb265;
  box-shadow:0 6px 16px rgba(255,122,26,.25);
  transform:translateY(-1px);
}

/* 「…」の見た目はシンプルに */
.nav-links .page-numbers.dots,
ul.page-numbers > li > .page-numbers.dots{
  min-width:auto;
  height:auto;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

.fixed-btn {
  position: fixed;     /* 画面に対して固定する */
  bottom: 50px;       /* 画面下からの距離 */
  right: 50px;        /* 画面右からの距離 */
  z-index: 99999;     /* 他の要素よりも最前面に */
  height: 80px;
  width: 80px;
  display: inline-block;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* 影をつけて目立たせる */
  border-radius: 50%; /* 丸いボタン風 */
  text-align: center;
  line-height: 80px;
  cursor: pointer;
}

/* 他の要素が `z-index: 99999` 以上を持っている場合に強制的に前面にする */
.fixed-btn {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 2147483647 !important; /* 最大値を設定して他の要素を超える */
}

/* メディアクエリ（スマホ版） */
@media screen and (max-width: 768px) {
  .fixed-btn {
    width: 80px;   /* SP版はさらに小さく */
    height: 80px;
    bottom: 15px;  /* 画面下の余白を減らす */
    right: 15px;
  }
}

/* PCだけヒーロー内の左右余白を広げる */
@media (min-width: 1024px){
  body.home #hero .content-scope,
  body.front-page #hero .content-scope{
    padding-left: 40px !important;   /* お好みで 32〜64px くらいに調整 */
    padding-right: 40px !important;
  }
}

/* ===================== ここから最新版CSS（そのまま） ===================== */
:root{
  --brand:#f97316;
  --brand-600:#ea580c;
  --pill-bg:#fff7ed;
  --pill-bd:#fdba74;
}

/* コンテナと余白 */
.nmj-wrap{padding-inline:1rem}

/* ボタン・ピル */
.brand-btn{
  display:inline-flex;align-items:center;gap:.5rem;border-radius:.75rem;
  background:var(--brand);color:#fff;padding:.5rem 1rem;font-weight:800;
  box-shadow:0 6px 18px rgba(249,115,22,.25);transition:.2s
}
.brand-btn:hover{background:var(--brand-600);transform:translateY(-1px)}
.brand-pill{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--pill-bd);
  background:var(--pill-bg);color:#9a3412;border-radius:9999px;
  padding:.25rem .75rem;font-weight:700;font-size:.9rem;transition:.15s
}
.brand-pill:hover{filter:saturate(1.1)}

/* カード */
.card{
  border-radius:1rem;background:rgba(255,255,255,.92);
  box-shadow:0 2px 10px rgba(2,6,23,.06);border:1px solid rgba(2,6,23,.06)
}
.card-hover{transition:.2s}
.card-hover:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,6,23,.10)}

/* サムネ */
.thumb{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.75rem;
  background:linear-gradient(135deg,#fde68a,#fca5a5)
}

/* ヒーロー */
.hero{
  padding:0;
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(249,115,22,0.12), transparent 70%),
    radial-gradient(800px 400px at -10% 110%, rgba(249,115,22,0.08), transparent 60%);
}
.hero-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
    var(--nmj-hero, url('https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?q=80&w=1600&auto=format&fit=crop'));
  background-size:cover;background-position:center;
}

/* グリッド共通 */
.nmj-grid{margin-top:1.5rem}

/* 横スクロール */
.nmj-hscroll .snap-start{scroll-snap-align:start}
.nmj-hscroll .grid{scroll-snap-type:x mandatory}

/* トーンカード高さ */
.nmj-tone-card{height:100%}

/* Cocoonの余白と干渉しにくい微調整 */
.entry-content .brand-btn{line-height:1.25}
.entry-content .brand-pill{line-height:1.1}

/* 投稿カードの補助（行数制御） */
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{display:inline-block;border:1px solid #d1d5db;border-radius:9999px;padding:.4rem .75rem;background:#fff;cursor:pointer;user-select:none}
.pill.active{background:#2563eb;border-color:#2563eb;color:#fff}

/* ========== 乗り換え名人 共通トーン ========== */
:root{
  --brand: #f59e0b;       /* アクセント（オレンジ） */
  --brand2:#a855f7;       /* セカンド（パープル系グラデ用） */
  --ink:   #0f172a;       /* 見出し */
  --text:  #334155;       /* 本文 */
  --muted: #64748b;       /* 補足 */
  --ring:  #e5e7eb;       /* 枠線 */
  --card:  #ffffff;
  --soft:  #f8fafc;       /* 薄背景 */
  --shadow-sm: 0 6px 18px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
}

/* ベース */
html,body{color:var(--text)}

/* ▼▼ 見出しのグローバル指定を削除し、7596ページ内の .nmj-wrap のみに限定 ▼▼ */
body.page-id-7596 .nmj-wrap .sec-title,
body.page-id-7596 .nmj-wrap .sec-h2,
body.page-id-7596 .nmj-wrap h2,
body.page-id-7596 .nmj-wrap h3{
  color:var(--ink);
  font-weight:800;
  letter-spacing:.02em;
}
/* ▲▲ ここまでスコープ化（.article h2/h3/h4/h5/h6 は不干渉） ▲▲ */

.sec-h2{position:relative;padding-bottom:.4rem}
.sec-h2:after{content:"";position:absolute;left:0;bottom:-6px;width:84px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--brand),var(--brand2))}

/* ボタン */
.brand-btn,.btn-cta,.nmj .btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff!important;
  padding:.7rem 1.05rem;border-radius:9999px;font-weight:800;box-shadow:var(--shadow-sm);
}
.brand-btn:hover,.btn-cta:hover{filter:brightness(.96);transform:translateY(-1px);transition:all .2s ease}
.brand-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#fff;border:1px solid var(--ring);color:var(--ink);padding:.45rem .7rem;border-radius:9999px;font-weight:800;
}
.brand-pill:hover{box-shadow:inset 0 0 0 2px rgba(245,158,11,.15);border-color:#fcd34d}

/* カード */
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow-sm)}
.card-hover{transition:transform .12s ease, box-shadow .2s ease}
.card-hover:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.card .thumb{width:100%;height:auto;display:block}

/* ======= TOP：GBごとの最安 ======= */
.gb-grid{display:grid;gap:16px}
@media(min-width:768px){.gb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.gb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gb-card{border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;background:#fff}
.gb-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem .9rem;background:linear-gradient(90deg,var(--brand),#ffb265);color:#111}
.gb-head .tag{background:rgba(255,255,255,.9);padding:.25rem .6rem;border-radius:.6rem;font-weight:800;font-size:.8rem}
.gb-body{padding:1rem}
.gb-line{display:flex;align-items:center;gap:.5rem;color:#334155}
.gb-price{font-size:1.6rem;font-weight:900;color:#ef4444;line-height:1}
.gb-cta{display:flex;gap:.5rem;margin-top:.75rem}
.gb-cta a{flex:1;text-align:center;padding:.55rem .8rem;border-radius:.6rem;font-weight:800}
.gb-cta .primary{background:var(--brand);color:#fff}
.gb-cta .outline{border:2px solid var(--brand);color:var(--brand);background:#fff}
.badge-pill{background:#f1f5f9;padding:.25rem .6rem;border-radius:9999px;font-weight:700;font-size:.8rem}
.card-opt{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:.9rem;border:2px solid var(--ring);background:#fff;font-weight:700
}
.card-opt.is-active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(245,158,11,.15) inset}

/* ======= シミュレーション（[nmj_sim]） ======= */
.section{padding:56px 0}
.sim-card{background:#fff;border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow-md);padding:18px}
.sim-group-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sim-group-tabs .tab{
  padding:8px 12px;border-radius:999px;border:1px solid var(--ring);background:#fff;color:#0f172a;cursor:pointer;font-weight:800
}
.sim-group-tabs .tab.active{background:#0ea5e9;color:#fff;border-color:transparent}
.sim-grid{display:grid;grid-template-columns:1fr;gap:16px}
.q-block{background:#f8fafc;border-radius:12px;padding:14px;border:1px solid var(--ring)}
.q-title{font-weight:800;margin-bottom:10px;color:#0f172a;display:flex;align-items:center;gap:8px}
.q-title .num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;background:#0f172a;color:#fff;font-size:12px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{padding:10px 14px;border-radius:10px;border:1px solid #dce3eb;background:#fff;color:#0f172a;cursor:pointer;font-weight:800}
.pill.active{background:var(--brand);color:#111;border-color:transparent}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:6px}
.btn-search{background:var(--brand);color:#111}
.btn-reset{background:#e2e8f0;color:#111}

/* ======= 診断結果カード ======= */
.result-toolbar{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.sort-tabs{display:flex;gap:8px;flex-wrap:wrap}
.sort-tabs .tab{padding:8px 12px;border-radius:999px;border:1px solid var(--ring);background:#fff;color:#0f172a;cursor:pointer;font-weight:800}
.sort-tabs .tab.active{background:#0ea5e9;color:#fff;border-color:transparent}
.match-msg{margin:10px 0 18px;padding:10px 14px;border:1px dashed #94a3b8;border-radius:10px;background:#fff;font-weight:800}
.result-list{display:grid;gap:16px}

.result-list .card .head{padding:16px 16px 8px}
.top-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:42px;border-radius:8px;object-fit:cover;border:1px solid var(--ring)}
.brand .name{font-weight:900;font-size:20px}
.pill-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#f1f5ff;color:#1f2a44;border:1px solid #dbe5ff;font-weight:800}
.pill-chip .dot{width:6px;height:6px;border-radius:999px;background:#a3bffa}
.stat-chips{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin-top:6px}
.stat{display:flex;align-items:center;gap:8px;border:1px dashed var(--ring);padding:10px 12px;border-radius:12px;background:#fff}
.stat .label{color:#64748b;font-weight:700;font-size:12px}
.stat .value{font-weight:900}
.stat .value.highlight{color:#ef4444}
.actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px dashed var(--ring);border-bottom:1px dashed var(--ring);background:#fcfcfd}
.actions .btn{padding:10px 12px;border-radius:10px;font-weight:800}

/* ======= 共通横スクロール（キャンペーン） ======= */
.nmj-hscroll{overflow:hidden}
.nmj-hscroll .grid{scroll-snap-type:x mandatory}
.nmj-hscroll .card{scroll-snap-align:start}

/* ======= その他（HowTo など） ======= */
.nmj-tone-card .font-bold{color:var(--ink)}

/* ========== Base / Tone ========== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700;900&display=swap');

:root{
  --brand: #f59e0b;        /* accent */
  --brand-2: #a855f7;      /* secondary accent */
  --text-strong:#0f172a;   /* slate-900 */
  --text:#334155;          /* slate-700 */
  --muted:#64748b;         /* slate-500 */
  --surface:#fff;
  --surface-soft:#f8fafc;  /* slate-50 */
  --ring:#e5e7eb;
  --shadow-sm:0 4px 14px rgba(15,23,42,.06);
  --shadow-md:0 8px 28px rgba(15,23,42,.08);
}

html,body{ font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif !important; color:var(--text); }
.container{ max-width:1180px; }

/* ▼▼ Headings（グローバル）を page-id-7596 の .nmj-wrap に限定 ▼▼ */
body.page-id-7596 .nmj-wrap h1,
body.page-id-7596 .nmj-wrap h2,
body.page-id-7596 .nmj-wrap h3,
body.page-id-7596 .nmj-wrap .sec-h2,
body.page-id-7596 .nmj-wrap .section-title{
  color:var(--text-strong);
  font-weight:800 !important;
  letter-spacing:.02em;
}
/* ▲▲ ここまでスコープ化（.article h4/h5/h6 は不干渉） ▲▲ */

/* Accent underline for section titles */
.sec-h2{ position:relative; padding-bottom:.4rem; }
.sec-h2:after{
  content:""; position:absolute; left:0; bottom:-6px; width:72px; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}

/* Buttons */
.btn-cta,.btn,.button,a.button,.cta-button,.cta,.more-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff !important; border:none; border-radius:9999px; padding:.78rem 1.15rem; font-weight:800; text-decoration:none;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:all .2s ease;
}
.btn-cta:hover,.btn:hover,.button:hover,a.button:hover,.cta:hover{ filter:brightness(.96); transform:translateY(-1px); }

/* Cards */
.card,.result-card,.plan-card,.faq-item,.brand-card,.gb-card,.yt-card,.article-card{
  background:var(--surface); border:1px solid var(--ring); border-radius:16px; box-shadow:var(--shadow-sm);
}
.card-hover:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); transition:all .15s ease; }

.card-opt{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .8rem;
  border-radius:.9rem; border:2px solid var(--ring); background:#fff; font-weight:700;
}
.card-opt.is-active{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(245,158,11,.15) inset; }

/* Chips & badges */
.q-chip,.badge,.pill,.tag{
  display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .6rem;
  border-radius:999px; font-weight:700;
  color:var(--brand); background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.20);
}

/* Dots divider */
.dot{ border-top:2px dotted #cbd5e1; opacity:.9; }

/* ===== Campaign slider ===== */
.camp-track{ display:flex; gap:16px; transition:transform .6s ease; }
.camp-card{ flex:0 0 calc(33.333% - 11px); }
@media (max-width:1024px){ .camp-card{ flex-basis: calc(50% - 8px);} }
@media (max-width:640px){ .camp-card{ flex-basis: 100%; } }

/* ===== GB cards ===== */
.gb-grid{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:16px; }
@media(min-width:768px){ .gb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1024px){ .gb-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gb-card{ border:1px solid var(--ring); border-radius:1rem; overflow:hidden; background:#fff; box-shadow:0 8px 20px rgba(15,23,42,.05); }
.gb-head{ display:flex; align-items:center; justify-content:space-between; padding:.6rem .9rem; background:linear-gradient(90deg,var(--brand),#ffb265); color:#111; }
.gb-head .tag{ background:rgba(255,255,255,.85); padding:.25rem .6rem; border-radius:.6rem; font-weight:800; font-size:.8rem; }
.gb-body{ padding:1rem; }
.gb-line{ display:flex; align-items:center; gap:.5rem; margin:.35rem 0; color:#334155; }
.gb-price{ font-size:1.6rem; font-weight:900; color:#ef4444; line-height:1; }
.gb-meta{ display:flex; gap:1rem; color:#475569; font-size:.9rem; }
.gb-cta{ display:flex; gap:.5rem; margin-top:.75rem; }
.gb-cta a{ flex:1; text-align:center; padding:.55rem .8rem; border-radius:.6rem; font-weight:800; }
.gb-cta .primary{ background:var(--brand); color:#fff; }
.gb-cta .outline{ border:2px solid var(--brand); color:var(--brand); background:#fff; }
.badge-pill{ background:#f1f5f9; padding:.25rem .6rem; border-radius:999px; font-weight:700; font-size:.8rem; }

/* ===== FAQ ===== */
.faq details{ border:1px solid var(--ring); border-radius:1rem; padding:1rem; background:#fff; }
.faq summary{ cursor:pointer; font-weight:800; list-style:none; display:flex; justify-content:space-between; align-items:center; }

/* Minor utils */
.link-row a{ color:var(--brand); font-weight:700; text-decoration:none; }
.link-row a:hover{ text-decoration:underline; }

/* ===== Simulation v8 inspired ===== */
.nmj-sim-hero{
  position:relative; background:#0b132a; color:#fff; padding:56px 0; isolation:isolate;
}
.nmj-sim-hero::before{
  content:""; position:absolute; inset:0;
  background: url('https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  opacity:.18;
}
.nmj-sim-hero .inner{position:relative; z-index:1; max-width:1200px; margin:auto; padding:0 16px}
.nmj-sim-hero .badge{display:inline-flex;align-items:center;font-weight:800;background:#fff;color:#111;padding:8px 12px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.nmj-sim-hero h1{margin:.5rem 0;font-size:clamp(28px,4vw,52px);font-weight:900;line-height:1.15}
.nmj-sim-hero p{color:#e2e8f0}
.select-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.mode-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0f172a;border:1px solid #e2e8f0;padding:10px 14px;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 6px 16px rgba(15, 23, 42, .08)}
.mode-chip.is-active{background:#f59e0b;color:#111827;border-color:transparent}

.nmj-sim-monthly{max-width:1200px;margin: -20px auto 0; padding:0 16px}
.nmj-sim-monthly .title-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.nmj-sim-monthly .pr{background:#dcfce7;color:#14532d;font-weight:800;border-radius:999px;padding:4px 10px}

.nmj-sim-results{max-width:1200px;margin:24px auto;padding:0 16px}
.nmj-sim-results .toolbar{display:flex;justify-content:flex-end}
.nmj-sim-results .tabs{display:flex;gap:8px}
.nmj-sim-results .tab{padding:8px 12px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-weight:800}
.nmj-sim-results .tab.is-active{background:#0ea5e9;color:#fff;border-color:transparent}
.nmj-sim-results .match{margin:12px 0;padding:10px 14px;border:1px dashed #94a3b8;border-radius:10px;background:#fff;font-weight:800}
.nmj-sim-results .list{display:grid;gap:16px}

/* result card */
.sim-card-v8{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.08);overflow:hidden}
.sim-card-v8 .head{padding:16px 16px 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sim-card-v8 .brand{display:flex;align-items:center;gap:12px}
.sim-card-v8 .brand img{height:42px;border-radius:8px;object-fit:cover;border:1px solid #e5e7eb}
.sim-card-v8 .brand .name{font-weight:900;font-size:20px}
.sim-card-v8 .net-pill{margin-left:auto;padding:6px 10px;border-radius:999px;background:#eef2ff;color:#1f2a44;border:1px solid #dbe5ff;font-weight:800}

.sim-card-v8 .stats{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin:6px 16px 0}
.sim-card-v8 .st{display:flex;align-items:center;gap:8px;border:1px dashed #e5e7eb;padding:10px 12px;border-radius:12px;background:#fff}
.sim-card-v8 .st .lb{color:#64748b;font-weight:700;font-size:12px}
.sim-card-v8 .st .vl{font-weight:900;color:#e11d48}

.sim-card-v8 .tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 16px 0}
.sim-card-v8 .tag{padding:6px 10px;border-radius:999px;background:#f8fafc;border:1px dashed #d1d5db;color:#334155;font-weight:800}

.sim-card-v8 .actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px dashed #e5e7eb;border-bottom:1px dashed #e5e7eb;background:#fcfcfd}
.sim-card-v8 .btn-article{background:#eef2ff;color:#3730a3;padding:10px 12px;border-radius:10px;font-weight:800}
.sim-card-v8 .btn-official{background:#ecfeff;color:#155e75;padding:10px 12px;border-radius:10px;font-weight:800}
.sim-card-v8 .btn-detail{background:#fff;color:#111;border:1px solid #e2e8f0;padding:10px 12px;border-radius:10px;font-weight:800}

.sim-card-v8 .detail{padding:14px 16px 0}
.spec-table{width:100%;border-collapse:collapse;background:#fff}
.spec-table th,.spec-table td{border:1px solid #eee;padding:10px 12px;text-align:left}
.spec-table th{width:240px;background:#fafafa;color:#333;font-weight:700}

.campaign-bar{background:linear-gradient(90deg,#fff7ed,#ffe7c2);padding:10px 16px;border-top:1px dashed #fdba74;display:flex;justify-content:space-between;align-items:center}
.campaign-bar .right{font-size:12px;color:#92400e}

/* recommended (PR) banner inserted between results */
.reco-banner{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.08);border:1px solid #e5e7eb}
.reco-banner .reco-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e5e7eb;font-weight:800}
.reco-banner .reco-head .pr{color:#0b8dc6;font-weight:800}
.reco-body{display:grid;grid-template-columns:1fr auto auto auto 160px;gap:12px;align-items:center;padding:16px}
.reco-body .logo{display:flex;align-items:center;gap:12px}
.reco-body .logo img{width:56px;height:56px;border-radius:12px;border:1px solid #e5e7eb}
.reco-body .ttl{font-weight:900}
.reco-body .badge{display:inline-block;background:#e6fffb;color:#0b8dc6;padding:4px 8px;border-radius:999px;font-weight:800}
.reco-body .label{color:#64748b;font-weight:700;font-size:12px}
.reco-body .value{font-weight:900}
.reco-body .btn-cta{display:inline-block;background:#f59e0b;color:#111827;padding:10px 14px;border-radius:12px;font-weight:900}
.reco-foot{background:linear-gradient(90deg,#ffedd5,#ffd6a5);display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px dashed #f59e0b}
.reco-foot .big{font-size:18px;font-weight:900;color:#ef4444}
.reco-foot .exp{margin-left:auto;font-weight:800}

@media (max-width:900px){
  .sim-card-v8 .stats{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .reco-body{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(32px,auto)}
  .reco-body .reco-cta{grid-column:1/-1}
}
/* ===== 最新版TOPトーン同期 ===== */
:root{
  --brand:#FF7A1A;
  --brand-2:#FFCC00;
  --ring:#E5E7EB;
}
.container{ max-width:1180px; }
.sec-h2{ position:relative; font-weight:800 }
.sec-h2:after{
  content:""; position:absolute; left:0; bottom:-6px; width:120px; height:6px;
  background:linear-gradient(90deg,var(--brand),#ffb265);
}
.btn-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--brand); color:#fff; border-radius:9999px;
  padding:.7rem 1.1rem; font-weight:800;
}
.btn-cta:hover{ filter:brightness(.95) }
.card{ border:1px solid var(--ring); border-radius:1rem; background:#fff; overflow:hidden; box-shadow:0 6px 18px rgba(15,23,42,.06) }

/* ===== シミュ：タブ／質問／結果 ===== */
.sim-tabbar{ display:flex; gap:.5rem; flex-wrap:wrap }
.sim-tab{
  border:1px solid var(--ring); background:#fff; border-radius:999px; padding:.5rem 1rem;
  font-weight:800; color:#334155;
}
.sim-tab.is-active{ outline:3px solid rgba(255,122,26,.15); border-color:var(--brand); }
.card-opt{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .8rem; border-radius:.9rem; border:2px solid var(--ring); background:#fff; font-weight:700 }
.card-opt.is-active{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,122,26,.15) inset }
.more-btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-radius:9999px; font-weight:800
}

/* 会社カードの共通サムネ */
.thumb{ aspect-ratio:16/9; object-fit:cover; width:100%; border-radius:.75rem; }

/* === CTA ボタン === */
.btn-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#f97316;color:#fff;border-radius:12px;
  padding:.6rem 1rem;font-weight:700;box-shadow:0 6px 18px rgba(249,115,22,.25);
}
.btn-cta:hover{background:#ea580c;color:#fff}

/* === クリック可能なオプション === */
.card-opt{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .75rem;border:1px solid #e5e7eb;border-radius:12px;
  background:#fff;cursor:pointer;user-select:none
}
.card-opt.is-active{border-color:#f97316;background:#fff7ed}

/* === 会社検索ツールバー === */
.nmj-company-toolbar{margin-top:.5rem}
.nmj-searchbar{
  display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:.4rem .8rem;min-width:260px
}
.nmj-searchbar i{color:#94a3b8}
.nmj-search-input{border:none;outline:none;background:transparent;width:220px}
.nmj-count{font-weight:700;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:.35rem .6rem}

/* 結果カード */
.nmj-result-card{border:1px solid #e5e7eb;border-radius:16px;background:#fff}

.entry-content > h1:first-of-type{ display:none !important; }

/* companies_最新 風 */
.nmj-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.post-card, .company-card, .card { border:1px solid #e2e8f0; border-radius:12px; background:#fff; overflow:hidden; }
.post-card .thumb, .company-card .thumb { width:100%; aspect-ratio:16/9; object-fit:cover; }
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px solid #e5e7eb;border-radius:9999px;background:#fff}

/* 最新ショート：縦動画カード */
#social-latest .card .aspect-\[9\/16\] iframe{ border:0; border-radius:12px; }

/* 会社検索の見た目（モック準拠） */
.brand-pill select { background: transparent; border: 0; }
#companies .thumb{ aspect-ratio:16/10; object-fit:cover; border-radius:.75rem; }

/* ▼▼ ページネーション横並び：7596ページ限定 ▼▼ */
body.page-id-7596 .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; padding:.4rem .7rem; margin:.15rem; border-radius:.6rem; background:#fff;
}
body.page-id-7596 .page-numbers.current{
  background:linear-gradient(90deg,#f59e0b,#f97316); color:#fff; border-color:transparent;
}
/* ▲▲ ほかのページはテーマ準拠のまま ▲▲ */

/* ================================
   Quick Patch for Cocoon（7596ページのみ）
   1) 横幅フル化（特に横画面）
   2) .page-numbers を横並び（UL/直列 両対応）
   ================================ */

/* 1) 横幅フル化（7596ページのみ） */
body.page-id-7596{
  max-width:100%;
  overflow-x:hidden;
}
body.page-id-7596 .wrap,
body.page-id-7596 .container,
body.page-id-7596 #container,
body.page-id-7596 #main,
body.page-id-7596 .content,
body.page-id-7596 .main,
body.page-id-7596 .l-container,
body.page-id-7596 .entry-content,
body.page-id-7596 .article,
body.page-id-7596 .article-body{
  max-width: none !important;
  width: 100% !important;
}

/* 横画面時は左右パディングを最小化（Safe Area 対応・7596ページのみ） */
@media (orientation: landscape){
  body.page-id-7596 .wrap,
  body.page-id-7596 .container,
  body.page-id-7596 #container,
  body.page-id-7596 #main,
  body.page-id-7596 .content,
  body.page-id-7596 .main,
  body.page-id-7596 .l-container{
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* 2) ページネーション（UL型）— 7596ページのみ */
body.page-id-7596 ul.page-numbers{
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}
body.page-id-7596 ul.page-numbers > li{ display: inline; }
body.page-id-7596 ul.page-numbers a,
body.page-id-7596 ul.page-numbers span{
  display: inline-flex;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  line-height: 1;
}
body.page-id-7596 ul.page-numbers .current{
  background: var(--brand, #0ea5e9);
  color: #fff;
  border-color: transparent;
}

/* 2) ページネーション（.nav-links直列型）— 7596ページのみ */
body.page-id-7596 .nav-links{
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
}
body.page-id-7596 .nav-links > .page-numbers{
  display: inline-flex !important;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  border-radius:8px;
}
body.page-id-7596 .nav-links > .page-numbers.current{
  background: var(--brand, #0ea5e9);
  color: #fff;
  border-color: transparent;
}

/* 念のため、テーマ側の縦積み指定を打ち消し（7596ページのみ） */
body.page-id-7596 .page-numbers,
body.page-id-7596 .nav-links > .page-numbers{
  float: none !important;
}

/* （オプション）他ページでグローバル上書きが残っていた場合の応急処置 */
@supports (all: revert){
  body:not(.page-id-7596) .page-numbers{ all: revert; }
  body:not(.page-id-7596) .nav-links > .page-numbers{ all: revert; }
}

/* ===================== ここまで最新版CSS（そのまま） ===================== */


/* =================================================================
   ▼▼ 7596ページ専用：Cocoonの見出し＆paginationを完全無効化して独自適用（修正版） ▼▼
   （このブロックは必ずファイルの一番最後に置いてください）
   ================================================================= */

/* 0) セレクタ修正ポイント：
      #post-7596 と .article が同一要素であるケースに対応 */
:root{} /* ダミー：上のコメント保持用 */
/* ===================== 7596ページ専用にスコープした差し替え版 ===================== */

/* 変数は :root ではなく対象ページの body に持たせる */
body.page-id-7596{
  --brand:#f97316;
  --brand-600:#ea580c;
  --pill-bg:#fff7ed;
  --pill-bd:#fdba74;

  /* トーン統一（下部 Brand Unifier 相当） */
  --brand-2:#FFCC00;
  --ring:#E5E7EB;
  --cta-grad: linear-gradient(135deg,var(--brand),var(--brand-2));

  /* 追加トークン（上段の別 :root 群を統合） */
  --ink:#0f172a; --text:#334155; --muted:#64748b;
  --card:#ffffff; --soft:#f8fafc;
  --shadow-sm:0 6px 18px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px rgba(15,23,42,.08);
}

/* コンテナと余白 */
body.page-id-7596 .nmj-wrap{padding-inline:1rem}

/* ボタン・ピル */
body.page-id-7596 .brand-btn{
  display:inline-flex;align-items:center;gap:.5rem;border-radius:.75rem;
  background:var(--brand);color:#fff;padding:.5rem 1rem;font-weight:800;
  box-shadow:0 6px 18px rgba(249,115,22,.25);transition:.2s
}
body.page-id-7596 .brand-btn:hover{background:var(--brand-600);transform:translateY(-1px)}
body.page-id-7596 .brand-pill{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--pill-bd);
  background:var(--pill-bg);color:#9a3412;border-radius:9999px;
  padding:.25rem .75rem;font-weight:700;font-size:.9rem;transition:.15s
}
body.page-id-7596 .brand-pill:hover{filter:saturate(1.1)}

/* カード */
body.page-id-7596 .card{
  border-radius:1rem;background:rgba(255,255,255,.92);
  box-shadow:0 2px 10px rgba(2,6,23,.06);border:1px solid rgba(2,6,23,.06)
}
body.page-id-7596 .card-hover{transition:.2s}
body.page-id-7596 .card-hover:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,6,23,.10)}

/* サムネ */
body.page-id-7596 .thumb{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.75rem;
  background:linear-gradient(135deg,#fde68a,#fca5a5)
}

/* ヒーロー */
body.page-id-7596 .hero{
  padding:0;
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(249,115,22,0.12), transparent 70%),
    radial-gradient(800px 400px at -10% 110%, rgba(249,115,22,0.08), transparent 60%);
}
body.page-id-7596 .hero-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
    var(--nmj-hero, url('https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?q=80&w=1600&auto=format&fit=crop'));
  background-size:cover;background-position:center;
}

/* グリッド共通 */
body.page-id-7596 .nmj-grid{margin-top:1.5rem}

/* 横スクロール */
body.page-id-7596 .nmj-hscroll .snap-start{scroll-snap-align:start}
body.page-id-7596 .nmj-hscroll .grid{scroll-snap-type:x mandatory}

/* トーンカード高さ */
body.page-id-7596 .nmj-tone-card{height:100%}

/* Cocoonの余白と干渉しにくい微調整 */
body.page-id-7596 .entry-content .brand-btn{line-height:1.25}
body.page-id-7596 .entry-content .brand-pill{line-height:1.1}

/* 投稿カードの補助（行数制御） */
body.page-id-7596 .line-clamp-2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

/* 汎用ピルUI */
body.page-id-7596 .pills{display:flex;flex-wrap:wrap;gap:.5rem}
body.page-id-7596 .pill{display:inline-block;border:1px solid #d1d5db;border-radius:9999px;padding:.4rem .75rem;background:#fff;cursor:pointer;user-select:none}
body.page-id-7596 .pill.active{background:#2563eb;border-color:#2563eb;color:#fff}

/* ========== 共通トーン（見出しは既に7596限定だったので維持） ========== */
body.page-id-7596 .nmj-wrap .sec-title,
body.page-id-7596 .nmj-wrap .sec-h2,
body.page-id-7596 .nmj-wrap h2,
body.page-id-7596 .nmj-wrap h3{
  color:var(--ink);font-weight:800;letter-spacing:.02em;
}
body.page-id-7596 .sec-h2{position:relative;padding-bottom:.4rem}
body.page-id-7596 .sec-h2:after{
  content:"";position:absolute;left:0;bottom:-6px;width:84px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--brand),var(--brand-2))
}

/* Buttons（トーン統一もこのページだけに適用） */
body.page-id-7596 :is(.brand-btn,.btn-cta,.nmj .btn){
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--cta-grad);color:#fff!important;
  padding:.7rem 1.05rem;border-radius:9999px;font-weight:800;box-shadow:var(--shadow-sm);
}
body.page-id-7596 :is(.brand-btn:hover,.btn-cta:hover){filter:brightness(.96);transform:translateY(-1px);transition:all .2s ease}
body.page-id-7596 .brand-pill{
  display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--ring);color:var(--ink);
  padding:.45rem .7rem;border-radius:9999px;font-weight:800;
}
body.page-id-7596 .brand-pill:hover{box-shadow:inset 0 0 0 2px rgba(245,158,11,.15);border-color:#fcd34d}

/* カード（再定義） */
body.page-id-7596 .card{background:var(--card);border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow-sm)}
body.page-id-7596 .card-hover{transition:transform .12s ease, box-shadow .2s ease}
body.page-id-7596 .card-hover:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
body.page-id-7596 .card .thumb{width:100%;height:auto;display:block}

/* ======= TOP：GBごとの最安（主要だけ抜粋・必要分をスコープ） ======= */
body.page-id-7596 .gb-grid{display:grid;gap:16px}
@media(min-width:768px){ body.page-id-7596 .gb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){ body.page-id-7596 .gb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.page-id-7596 .gb-card{border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;background:#fff}

/* ======= シミュレーション／結果（見出し以外の主要部のみスコープ） ======= */
body.page-id-7596 .section{padding:56px 0}
body.page-id-7596 .sim-card{background:#fff;border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow-md);padding:18px}

/* ======= 横スクロール（キャンペーン） ======= */
body.page-id-7596 .nmj-hscroll{overflow:hidden}
body.page-id-7596 .nmj-hscroll .grid{scroll-snap-type:x mandatory}
body.page-id-7596 .nmj-hscroll .card{scroll-snap-align:start}

/* フォント/ベース（このページのみ） */
body.page-id-7596{ color:var(--text) }
body.page-id-7596 .container{ max-width:1180px }

/* 会社カード等のサムネ再指定 */
body.page-id-7596 .nmj-grid .company-card img.thumb,
body.page-id-7596 .nmj-grid .post-card img.thumb{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }

/* ▼ ページネーション（すでに 7596 限定でOK。元のまま） */
body.page-id-7596 .page-numbers{ display:inline-flex; align-items:center; justify-content:center; padding:.4rem .7rem; margin:.15rem; border-radius:.6rem; background:#fff; }
body.page-id-7596 .page-numbers.current{ background:linear-gradient(90deg,#f59e0b,#f97316); color:#fff; border-color:transparent; }
/* …（以下、あなたの CSS 末尾にある 7596 専用の pagination/heading リセット群はそのまま） */

/* ▼ 記事本文の段落余白（このページだけ） */
body.page-id-7596 article .entry-content p{ margin:0 0 1.8em 0 !important; }
body.page-id-7596 article .entry-content p:last-child{ margin-bottom:0 !important; }
body.page-id-7596 article .entry-content li > p{ margin-bottom:.8em !important; }
body.page-id-7596 article .entry-content figcaption p{ margin-bottom:0 !important; }

/* ▼ TOP：おすすめ動画（右カード）補強もページ限定 */
body.page-id-7596 #social-latest .card img,
body.page-id-7596 #social-latest .card .thumb{ aspect-ratio:4/3 !important; object-fit:cover; }
body.page-id-7596 #social-latest .card .aspect-\[9\/16\] iframe{ border-radius:12px; }

/* ここより下は、元CSSで既に body.page-id-7596 が付与されているブロックは変更不要です */

/* =================================================================
   ▲▲ 7596ページ専用の完全上書きはここまで（必ずファイル末尾に配置） ▲▲
   ================================================================= */

/* ===========================================================
   Brand Unifier（特集/キャンペーンの色に全体を合わせる）
   このブロックは nmj.css の末尾に追加してください
   =========================================================== */

/* キーとなるブランドトークンを固定化（特集/キャンペーン基準） */
:root{
  --brand:#FF7A1A;               /* main */
  --brand-2:#FFCC00;             /* secondary (grad) */
  --brand-600:#E96B00;           /* hover/active */
  --ring:#E5E7EB;
  --cta-grad: linear-gradient(135deg,var(--brand),var(--brand-2));
}

/* ========== CTA / ボタンのトーンを完全統一 ========== */
.brand-btn,
.btn-cta,
.btn,
.button,
a.button,
.cta-button,
.cta,
.more-btn{
  background: var(--cta-grad) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(255,122,26,.25) !important;
  border:none !important;
}
.brand-btn:hover,
.btn-cta:hover,
.btn:hover,
.button:hover,
a.button:hover,
.cta:hover,
.more-btn:hover{
  filter:brightness(.96);
  transform:translateY(-1px);
}

/* pill は白ベースのまま・枠線だけブランド寄りに */
.brand-pill{ border-color: #ffd09a !important; }
.brand-pill:hover{ box-shadow: inset 0 0 0 2px rgba(255,122,26,.15); border-color:#ffd09a !important; }

/* ========== 見出しのアクセントを統一（下線グラデ） ========== */
.sec-h2{ position:relative; font-weight:800 }
.sec-h2:after{
  content:""; position:absolute; left:0; bottom:-6px; height:6px; width:120px; border-radius:6px;
  background: var(--cta-grad);
}

/* ========== シミュレーション部の色味を統一 ========== */
/* タブのアクティブ色（従来の水色→ブランド） */
.sim-group-tabs .tab.active,
.sort-tabs .tab.active,
.nmj-sim-results .tab.is-active{
  color:#fff !important;
  border-color: transparent !important;
}
/* 質問チップ（.pill）アクティブ */
.pill.active{ color:#111 !important; border-color:transparent !important; }

/* ========== “TOPのおすすめ動画右カード” を少し大きく（既出の修正の補強） ========== */
#social-latest .card .aspect-\[9\/16\] iframe{ border-radius:12px; }
#social-latest .card img,
#social-latest .card .thumb{ aspect-ratio:4/3 !important; object-fit:cover; }

/* ========== “TOPの会社一覧を画像フル” の見た目を補強 ========== */
.nmj-grid .company-card img.thumb,
.nmj-grid .post-card img.thumb{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }


/* ==== ヘッダーだけ左右ガター＋上下ゆとり（最小変更） ==== */
.nmj-header{
  position: sticky; top: 0; z-index: 999;
  background: rgba(255,255,255,.92);  /* 透明度は控えめに */
  backdrop-filter: saturate(120%) blur(6px);
}

/* ヘッダー中身の横幅＆余白だけを調整（本文側は触らない） */
#header-container .header-in{
  max-width: 1180px;         /* 中央寄せの最大幅 */
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px); /* 左右のスペース */
  padding-block: 10px;       /* 上下のちょいゆとり */
  box-sizing: border-box;
}
/* === 1) 全ページ：背景は白 === */
html, body { background:#fff !important; }

//* ===========================
   参考ファイルと同じ横幅・左右余白
   （最大1180px、左右16px）
   =========================== */
:root{
  --page-max: 1180px;
  --page-gutter: 16px;              /* = .px-4 と同等 */
}

/* グローバルのラッパー幅を統一（ヘッダー/本文/フッター） */
.wrap,
.header-in.wrap,
.footer-in.wrap,
.content-in.wrap,
.sidebar-in.wrap,
#main .wrap,
.container,           /* Tailwindの .container 相当が混在してもOK */
.nmj-wrap {
  max-width: var(--page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-right: var(--page-gutter) !important;
  box-sizing: content-box; /* 幅計算のズレ防止 */
}

/* wrap grid sm:grid-cols-2 gap-8 items-start だけ左ガターを無効化 */
.wrap.grid.sm\:grid-cols-2.gap-8.items-start {
  padding-left: 0 !important;
}


/* 以前の“フル幅にする”指定の打ち消し（7596ページ用の保険） */
body.page-id-7596 .wrap,
body.page-id-7596 .container,
body.page-id-7596 #container,
body.page-id-7596 #main,
body.page-id-7596 .content,
body.page-id-7596 .main,
body.page-id-7596 .l-container,
body.page-id-7596 .entry-content,
body.page-id-7596 .article,
body.page-id-7596 .article-body{
  max-width: var(--page-max) !important;
  width: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ヘッダーも同じ余白で固定（背景は白・少し透過のまま） */
.nmj-header{
  position: sticky; top: 0; z-index: 9999;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
/* ヘッダーは白・固定のまま（既存があるならそのままでもOK） */
body.page-id-7596 .nmj-header{
  position: sticky; top: 0; z-index: 9999;
  background: #fff;                 /* 透明度は無し＝白 */
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* SPではpillを少しコンパクトに */
@media (max-width: 767.98px){
  #nmj-sim-v8 .pill{
    font-size: 13px;       /* 既定から-1〜-2px程度 */
    padding: 8px 10px;     /* 少しだけ詰める */
  }
}
/* --- SPでは .sim-card の装飾を無効化（背景/枠/影/丸み/余白） --- */
@media (max-width: 767.98px){
  #nmj-sim-v8 .sim-card,
  body.page-id-7596 .sim-card,
  .sim-card{
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* ===========================================================
   NMJ：Customizer Color Bridge（末尾追記）
   - PHPで出している --brand / --brand-2 / --cta-grad を使って
     固定色(#FF7A1A/#FFCC00)を強制上書き
   =========================================================== */

#header-container .nmj-navwrap .navi-in > ul > li:last-child > a,
.btn-cta,
.brand-btn,
.more-btn,
#hero .btn-cta,
#nmj-sim-v8 .btn-primary,
#nmj-sim-v8 .btn-cta{
  background: var(--cta-grad) !important;
  background-image: var(--cta-grad) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(var(--brand-r), var(--brand-g), var(--brand-b), .25) !important;
}

#header-container .nmj-navwrap .navi-in > ul > li:last-child > a:hover,
.btn-cta:hover,
.brand-btn:hover,
.more-btn:hover,
#hero .btn-cta:hover,
#nmj-sim-v8 .btn-primary:hover,
#nmj-sim-v8 .btn-cta:hover{
  filter:brightness(.96);
  transform:translateY(-1px);
}

/* 見出し下線（sec-h2）のグラデもブランド同期 */
.sec-h2:after{
  background: var(--cta-grad) !important;
}

/* 選択中ピル（青固定→ブランド） */
.pill.active,
#nmj-sim-v8 .pill.active{
  background: var(--brand) !important;
  border-color: transparent !important;
  color:#111 !important;
}

/* =========================
 * ヘッダー：ロゴ左 + メニュー同列（PCのみ）
 * 本体は #header-container
 * ========================= */
@media (min-width: 1024px){

  /* ロゴ(#header) と ナビ(#navi) の共通親を横並びに */
  #header-container-in{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
  }

  /* Cocoonの "ロゴ中央（縦積み）" を打ち消す */
  #header-container-in.hlt-center-logo #navi{
    margin-top:0 !important;
  }

  /* ロゴ側（左）を必要以上に幅100%にしない */
  #header{
    flex:0 0 auto !important;
    margin:0 !important;
  }
  #header-in.wrap{
    width:auto !important;
    max-width:none !important;
    padding:0 !important;
  }
  .logo-header{
    margin:0 !important;
  }

  /* ナビ側（右）を同じ行に */
  #navi{
    flex:1 1 auto !important;
    background:transparent !important;
    margin:0 !important;
  }
  #navi-in.wrap{
    width:auto !important;
    max-width:none !important;
    padding:0 !important;

    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
  }

  /* メニューULを横並びに */
  #navi .menu-header.menu-pc{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    flex-wrap:wrap !important; /* 収まり切らない時は折り返し */
    margin:0 !important;
  }

  /* クリック範囲・見た目調整（任意） */
  #navi .menu-header.menu-pc > li > a{
    padding:10px 12px !important;
    white-space:nowrap !important;
  }

  /* ドロップダウンが崩れる場合の保険 */
  #navi .menu-header.menu-pc > li{ position:relative !important; }
  #navi .menu-header.menu-pc .sub-menu{ top:100% !important; }
}

/* ===========================================================
   FIX: グローバルメニューが表示されない件（最終パッチ）
   - SPでヘッダー本体を消さない
   - #navi / #navi-in が header内に来ても確実に表示
   =========================================================== */

/* SPでも header-in を消さない（ここが最重要） */
@media (max-width: 767.98px){
  #header-container .nmj-header-in{
    display:grid !important;
  }
}

/* 念のため “ナビ領域は必ず見える” */
#header-container #navi,
#header-container .navi{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* PC：ヘッダーメニューを横並びに */
@media (min-width: 961px){
  #header-container #navi-in,
  #header-container .navi-in{
    padding:0 !important;
    background:transparent !important;
  }
  #header-container ul.menu-header.menu-pc{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }
  #header-container ul.menu-header.menu-pc > li{ margin:0 !important; }
}

/* SP：モバイル用メニューがある場合はそれを出す（無いならPC用は隠す） */
@media (max-width: 960px){
  #header-container ul.menu-header.menu-pc{ display:none !important; }
  #header-container ul.menu-mobile{
    display:flex !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:6px;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================
   グローバルナビ：右端（最後のメニュー）をCTAボタン化
   ※このブロックは style.css の一番最後に追記
   ========================= */

/* 既に定義があれば不要（保険） */
:root{
  --cta-grad: linear-gradient(135deg,var(--brand,#FF7A1A),var(--brand-2,#FFCC00));
}

/* PC（Cocoon標準グロナビ） */
#navi .menu-header.menu-pc > li:last-child > a,
#navi .navi-in > ul > li:last-child > a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:.72rem 1.2rem !important;
  border-radius:9999px !important;
  font-weight:800 !important;
  line-height:1.1 !important;

  background: var(--cta-grad) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 6px 18px rgba(255,122,26,.25) !important;
  text-decoration:none !important;
}

#navi .menu-header.menu-pc > li:last-child > a:hover,
#navi .navi-in > ul > li:last-child > a:hover{
  filter:brightness(.96);
  transform:translateY(-1px);
}

/* 右端CTAの手前に少し余白（詰まる時の保険） */
#navi .menu-header.menu-pc > li:last-child{
  margin-left:8px !important;
}

/* SP（もし横スクロールメニュー等がある場合の保険） */
@media (max-width: 960px){
  #navi .menu-mobile > li:last-child > a,
  #navi .menu-header.menu-sp > li:last-child > a{
    padding:.6rem 1rem !important;
    border-radius:9999px !important;
    background: var(--cta-grad) !important;
    color:#fff !important;
  }
}