@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
*/

/* =====================================================================
   入札情報ユニオン — ブランドスタイル
   テイスト : NJSS入札リサーチセンター風レイアウト
   配色     : ネイビー紺 #1F3A5F  ×  bidscope緑 #059669（差し色）
   方針     : メインを紺にして「お堅い入札をちゃんと扱うメディア」感を出し、
              緑はリンク/CTA/強調の差し色に。競合NJSS(赤)とも区別。
   ===================================================================== */

:root {
  --u-navy:        #1e40af;  /* メイン＝信頼の青（ナビ・H2帯・見出し・ラベル） */
  --u-navy-dark:   #1e3a8a;  /* 深い青（hover・深い面） */
  --u-navy-50:     #eef3ff;  /* 青の極薄背景 */
  --u-grad-blue:   linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%); /* 信頼の青グラデ */
  --u-accent:       #f97316;  /* アクセント＝オレンジ（リンク・CTA・強調） */
  --u-accent-dark:  #ea580c;  /* オレンジhover */
  --u-accent-50:    #fff7ed;  /* オレンジの極薄背景 */
  --u-marker:      #FFF3B0;  /* マーカー黄 */
  --u-text:        #2B2E33;  /* 本文 */
  --u-muted:       #64748b;  /* 補助テキスト */
  --u-bg-soft:     #F4F6F8;  /* 薄背景・ボックス */
  --u-border:      #E3E7EC;  /* 罫線 */
  --u-font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --u-shadow-card: none;   /* フラット：影なし */
  --u-radius: 2px;         /* フラット：硬め・信頼感のある控えめな角丸 */
}

/* ---------- base ---------- */
body {
  font-family: var(--u-font-jp);
  color: var(--u-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
#content { background: transparent; }
#content #main .article,
.sidebar .widget,
.entry-card { background: #fff; }

a { color: var(--u-accent); }
a:hover { color: var(--u-accent-dark); }

/* カテゴリーリンク（cat-link / cat-link-N）はCocoonの自動配色をやめてデフォルト文字色・背景なしに */
.cat-link, a.cat-link {
  color: var(--u-text) !important;
  background: none !important;
  background-color: transparent !important;
  border-color: var(--u-border) !important;
}
.cat-link:hover { color: var(--u-accent) !important; }
/* 著者名もグレーに（文字色・ボーダー色とも） */
.author-name, a.author-name, .author-name.fn {
  color: var(--u-muted) !important;
  border-color: #cbd5e1 !important;
}
.author-name:hover { color: var(--u-text) !important; }

/* ---------- header ---------- */
#header, .header-container {
  background: #fff;
  border-bottom: 1px solid var(--u-border);
}
.site-name-text-link { color: var(--u-navy); font-weight: 700; }
.tagline { color: var(--u-muted); font-size: 12px; }
/* ヘッダーロゴ（2段ワードマーク）の高さ */
.logo-image img, .header-logo-image img, .header-site-logo-image { max-height: 78px; width: auto; }
@media screen and (max-width: 834px) {
  .logo-image img, .header-logo-image img { max-height: 58px; }
}
/* フッターの白ロゴ */
.footer-site-logo-image { max-height: 72px; width: auto; }

/* ---------- グローバルナビ（青グラデバー） ---------- */
#navi { background: var(--u-grad-blue); }
#navi .navi-in > ul > li > a { color: #fff; font-weight: 600; }
#navi .navi-in > ul > li > a:hover,
#navi .navi-in > ul > li.current-menu-item > a,
#navi .navi-in > ul > li.current_page_item > a { background: var(--u-navy-dark); }
#navi .navi-in ul ul { border-top: 2px solid var(--u-accent); }
#navi .navi-in ul ul li a { background: var(--u-navy-dark); color: #fff; }
#navi .navi-in ul ul li a:hover { background: #0f2540; }
.menu-button, #navi-in .menu-mobile-button { background: var(--u-navy); }

/* ---------- パンくず ---------- */
#breadcrumb, .breadcrumb {
  font-size: 12px; color: var(--u-muted);
  background: transparent; padding: 8px 0;
}
.breadcrumb a { color: var(--u-muted); }
.breadcrumb a:hover { color: var(--u-accent); }

/* ---------- 本文ベース：読みやすさ ---------- */
.article .entry-content {
  color: var(--u-text);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .01em;
}
.article .entry-content p { margin: 0 0 1.4em; }

/* ---------- H2：左に太い紺の縦帯（NJSS風） ---------- */
.article h2 {
  position: relative;
  margin: 2.4em 0 1.1em;
  padding: .35em 0 .35em .9em;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--u-navy);
  background: none;
  border: none;
}
.article h2::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; border-radius: 3px;
  background: var(--u-navy);
}

/* ---------- H3：紺→フェードの下線（NJSS風） ---------- */
.article h3 {
  margin: 2em 0 1em;
  padding: 0 0 .5em;
  font-size: 1.25em;
  font-weight: 700;
  color: var(--u-navy);
  background: none;
  border: none;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, var(--u-navy) 0%, var(--u-navy) 40%, rgba(31,58,95,0) 100%) 1;
}

/* ---------- H4：緑の小見出し ---------- */
.article h4 {
  margin: 1.6em 0 .8em;
  padding-left: .6em;
  font-size: 1.08em;
  font-weight: 700;
  color: var(--u-navy);
  background: none;
  border: none;
  border-left: 4px solid var(--u-accent);
}

/* ---------- リンク：bidscope緑 ---------- */
.article a {
  color: var(--u-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article a:hover { color: var(--u-accent-dark); }

/* SNSシェアボタンは“リンクの緑”を打ち消してボタン本来の色に（文字は白） */
.article .sns-share-buttons a,
.article .sns-buttons a,
.sns-share-buttons .sns-share-button a,
.sns-buttons .sns-button a {
  color: #fff;
  text-decoration: none;
}

/* ---------- 箇条書き：緑のドット ---------- */
.article .entry-content ul:not(.toc-list) { list-style: none; padding-left: 0; }
.article .entry-content ul:not(.toc-list) > li {
  position: relative; padding-left: 1.4em; margin: .5em 0;
}
.article .entry-content ul:not(.toc-list) > li::before {
  content: ""; position: absolute; left: .2em; top: .72em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--u-accent);
}

/* ---------- 番号付きリスト：紺の番号 ---------- */
.article .entry-content ol:not(.toc-list) {
  list-style: none; counter-reset: u-ol; padding-left: 0;
}
.article .entry-content ol:not(.toc-list) > li {
  position: relative; padding-left: 2.2em; margin: .6em 0; counter-increment: u-ol;
}
.article .entry-content ol:not(.toc-list) > li::before {
  content: counter(u-ol);
  position: absolute; left: 0; top: .15em;
  width: 1.6em; height: 1.6em; line-height: 1.6em;
  text-align: center; font-size: .85em; font-weight: 700;
  color: #fff; background: var(--u-navy); border-radius: 50%;
}

/* ---------- マーカー（黄ハイライト） ---------- */
.article mark, .article .marker {
  background: linear-gradient(transparent 60%, var(--u-marker) 60%);
  padding: 0 .1em; font-weight: 700; color: inherit;
}

/* ---------- 強調太字：紺 ---------- */
.article strong { color: var(--u-navy); font-weight: 700; }

/* ---------- テーブル：紺ヘッダー ---------- */
.article table {
  width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95em;
}
.article table th {
  background: var(--u-navy); color: #fff; font-weight: 600;
  padding: .7em 1em; border: 1px solid var(--u-navy); text-align: left;
}
.article table td { padding: .7em 1em; border: 1px solid var(--u-border); }
.article table tbody tr:nth-child(even) td { background: var(--u-bg-soft); }

/* ---------- 引用 ---------- */
.article blockquote {
  border-left: 4px solid var(--u-navy);
  background: var(--u-navy-50);
  border-radius: 0;
  padding: 16px 20px;
}

/* ---------- 目次（TOC）：紺基調（フラット） ---------- */
.toc {
  background: #fff !important;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  padding: 1.2em 1.4em;
}
.toc .toc-title {
  color: var(--u-navy); font-weight: 700;
  border-bottom: 2px solid var(--u-border);
  padding-bottom: .5em; margin-bottom: .6em;
}
.toc-list a { color: var(--u-text); text-decoration: none; }
.toc-list a:hover { color: var(--u-accent); text-decoration: underline; }
.toc-list > li > a { font-weight: 600; }

/* ---------- 区切り線 ---------- */
.article hr.wp-block-separator {
  border: none; border-top: 1px solid var(--u-border); margin: 2.4em 0;
}

/* ---------- ボタン / CTA：bidscope緑（フラット） ---------- */
.wp-block-button__link,
.article .btn, a.btn-wrap,
.btn-l, .btn-m, .btn-s {
  background: var(--u-accent);
  color: #fff !important;
  border: none; border-radius: var(--u-radius); font-weight: 700;
  box-shadow: none;
  transition: background-color .15s ease;
}
.wp-block-button__link:hover,
.article .btn:hover, a.btn-wrap:hover,
.btn-l:hover, .btn-m:hover, .btn-s:hover {
  background: var(--u-accent-dark); color: #fff;
}
/* 紺ボタン（.is-navy 付与で使える） */
.wp-block-button.is-navy .wp-block-button__link, .btn.is-navy {
  background: var(--u-navy);
}
.wp-block-button.is-navy .wp-block-button__link:hover, .btn.is-navy:hover {
  background: var(--u-navy-dark);
}

/* ---------- エントリーカード（フラット resting / hoverはふわっと） ---------- */
/* 枠は外側の .entry-card-wrap に一本化（内側 .entry-card の枠は消して二重を解消） */
.entry-card-wrap, .list .a-wrap {
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  box-shadow: none;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s cubic-bezier(.22,.61,.36,1),
              border-color .28s ease;
}
.entry-card-wrap .entry-card,
.list .a-wrap .entry-card,
.entry-card-wrap .e-card { border: none; border-radius: 0; }

/* hover：軽く浮いて柔らかい影がふわっと出る（borderはそのまま） */
.entry-card-wrap:hover, .list .a-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -14px rgba(31,58,95,.22);
}
.entry-card-title { color: var(--u-text); font-weight: 700; }
.cat-label { background: var(--u-navy); border-radius: 0; }

/* ---------- サイドバー / ウィジェット（フラット） ---------- */
.sidebar .widget {
  border-radius: var(--u-radius);
  border: none;        /* 枠線なし（新着コラム・カテゴリー等） */
  box-shadow: none;
}
/* 検索ウィジェットは枠なし＆余白詰め */
.sidebar .widget_search { border: none !important; padding: 0 !important; }

/* カテゴリー：各項目をボタン風にデザイン */
.sidebar .widget_categories ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget_categories li { margin: 0 0 8px; }
.sidebar .widget_categories li a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--u-border);
  border-radius: 8px;
  color: var(--u-text) !important;
  text-decoration: none;
  font-weight: 600; font-size: 13px;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
.sidebar .widget_categories li a::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--u-navy);
  transition: background-color .15s ease;
}
.sidebar .widget_categories li a:hover {
  border-color: var(--u-navy);
  background: var(--u-navy-50);
  color: var(--u-navy) !important;
  transform: translateX(2px);
}
.sidebar .widget_categories li a:hover::before { background: var(--u-accent); }
/* カテゴリーの件数表示 */
.sidebar .widget_categories li .post-count,
.sidebar .widget_categories li span { color: var(--u-muted); font-size: 11px; }

/* サイドバー追従のCTAウィジェット（枠なしでカード自身を見せる） */
.sidebar .widget_custom_html { border: none !important; padding: 0 !important; background: transparent !important; }
.union-cta-side {
  display: block;
  background: linear-gradient(160deg, #ecfdf5 0%, #ffffff 75%);
  border: 1px solid #d1fae5;
  border-radius: 12px;
  padding: 20px 18px;
  text-decoration: none !important;
}
.ucs-badge {
  display: inline-block; background: #059669; color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  margin-bottom: 12px;
}
.ucs-lead { color: #0f172a; font-weight: 800; font-size: 1.02rem; line-height: 1.55; margin: 0 0 8px; }
.ucs-sub { color: #64748b; font-size: 12px; line-height: 1.75; margin: 0 0 16px; }
.ucs-btn {
  display: block; text-align: center;
  background: var(--u-accent); color: #fff !important;
  font-weight: 800; font-size: .95rem; padding: 12px 16px; border-radius: 8px;
  text-decoration: none !important;
  box-shadow: 0 8px 20px -8px rgba(249,115,22,.5);
  transition: background-color .15s ease;
}
.ucs-btn:hover { background: var(--u-accent-dark); }
.widget_categories h3, .sidebar h3, .widget h3 {
  color: var(--u-navy);
  border-left: 4px solid var(--u-navy);
  border-bottom: 1px solid var(--u-border);
  padding-left: .6em; padding-bottom: .4em;
  background: transparent;
  font-size: 15px;
}
/* サイドバーの文字を本文より小さく */
.sidebar, .sidebar .widget { font-size: 13px; line-height: 1.7; }
.sidebar li { font-size: 13px; }
.sidebar .widget-entry-cards .entry-card-title,
.sidebar .a-wrap .entry-card-title,
.sidebar .new-entry-card-title,
.sidebar .widget-entry-card-title,
.sidebar .card-title { font-size: 12.5px !important; line-height: 1.5; font-weight: 600; }
.sidebar .post-date, .sidebar .cat-label { font-size: 11px; }
.sidebar .widget_search input,
.sidebar .search-edit { font-size: 13px; }

/* ---------- モバイル：サイドバーボタンで開くパネルの白文字対策（2026-06-24） ---------- */
/* Cocoonの .mobile-menu-buttons *{color:#fff} が、白背景のサイドバーパネル
   (.sidebar-menu-content) 内の文字まで白くして見えなくするため濃色に戻す */
.mobile-menu-buttons .sidebar-menu-content,
.mobile-menu-buttons .sidebar-menu-content li,
.mobile-menu-buttons .sidebar-menu-content p,
.mobile-menu-buttons .sidebar-menu-content span,
.mobile-menu-buttons .sidebar-menu-content a,
.mobile-menu-buttons .sidebar-menu-content .new-entry-card-title,
.mobile-menu-buttons .sidebar-menu-content .new-entry-card-snippet { color: var(--u-text) !important; }
.mobile-menu-buttons .sidebar-menu-content h3,
.mobile-menu-buttons .sidebar-menu-content .widget-sidebar-title { color: var(--u-navy) !important; }
.mobile-menu-buttons .sidebar-menu-content a:hover { color: var(--u-accent) !important; }
/* 色付き背景の上の白文字（CTAボタン・バッジ）は維持 */
.mobile-menu-buttons .sidebar-menu-content .ucs-btn,
.mobile-menu-buttons .sidebar-menu-content .ucs-badge { color: #fff !important; }

/* ---------- ページネーション（フラット） ---------- */
.pagination .page-numbers { border-radius: var(--u-radius); border-color: var(--u-border); box-shadow: none; }
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
  background: var(--u-navy); border-color: var(--u-navy); color: #fff;
}

/* ---------- トップへ戻る（フラット） ---------- */
#go-to-top-button, .go-to-top-button { background: var(--u-navy); border-radius: var(--u-radius); box-shadow: none; }
#go-to-top-button:hover { background: var(--u-navy-dark); }
/* トップへ戻るのアイコンを白に */
.go-to-top-button, .go-to-top-button-icon-font,
.go-to-top-button a, .go-to-top-button::before,
.go-to-top-button-icon-font::before { color: #fff !important; }

/* ---------- モバイルフッターメニュー：紺バー＋白アイコン ---------- */
.mobile-footer-menu-buttons, .mobile-menu-buttons {
  background: var(--u-navy);
  border-top: 1px solid var(--u-navy-dark);
}
.mobile-footer-menu-buttons *,
.mobile-menu-buttons,
.mobile-menu-buttons *,
.mobile-menu-buttons .mobile-menu-button,
.mobile-menu-buttons .mobile-menu-button a,
.mobile-menu-buttons a,
.mobile-menu-buttons [class*="fa"],
.mobile-menu-buttons .icon,
.mobile-menu-buttons i,
.mobile-menu-buttons .menu-caption,
.mobile-menu-buttons .mobile-menu-caption,
.mobile-menu-buttons .caption {
  color: #fff !important;
}
.mobile-menu-buttons .mobile-menu-button { border-color: rgba(255,255,255,.12); }

/* ---------- フッター：青グラデ ---------- */
.footer, .footer-top { background: var(--u-grad-blue); color: rgba(255,255,255,.82); }
.footer a { color: rgba(255,255,255,.82); }
.footer a:hover { color: #fff; }
.footer h3, .footer .widget h3 {
  color: #fff; border-left-color: var(--u-accent); border-bottom-color: rgba(255,255,255,.15);
}
.footer .copyright {
  border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55);
}

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media screen and (max-width: 834px) {
  .article h2 { font-size: 1.3em; }
  .sidebar .widget { padding: 16px; }
}

/* =====================================================================
   トップページ（front-page.php）— NJSS入札リサーチセンター風
   ===================================================================== */
/* サイドバーは記事(single)内だけに表示。トップ/アーカイブ/検索等は全幅 */
body:not(.single) #sidebar { display: none !important; }
body:not(.single) #main { width: 100% !important; max-width: 100% !important; margin: 0 !important; float: none !important; }

/* トップ(home)固有：全幅ヒーロー＆背景透過 */
body.home #content { background: transparent; }
body.home { overflow-x: hidden; }   /* 全幅ヒーローの横スクロール防止（トップのみ） */
body.home #content-in.wrap { max-width: 100%; padding: 0; }
body.home #main .article,
body.home #main { background: transparent !important; box-shadow: none !important; border: none !important; }
.uf { color: var(--u-text); }
.uf-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 8px;
}

/* 共通の小見出し */
.uf-eyebrow, .uf-sec-eyebrow {
  color: var(--u-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  margin: 0 0 6px;
}
.uf-sec-title {
  color: var(--u-navy);
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 24px;
  letter-spacing: -.01em;
}
.uf-sec-head { display: flex; align-items: flex-end; justify-content: space-between; }
/* 「くわしく見る」「一覧を見る」系はグレー（オレンジはCTAに集中） */
.uf-sec-more, .uf-feature-more {
  color: var(--u-muted); font-weight: 700; font-size: 13px; text-decoration: none;
}
.uf-sec-more:hover, .uf-feature-more:hover { color: var(--u-text); }

/* ---------- HERO（全幅・紺グラデ） ---------- */
.uf-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* 写真があれば background-image に指定（無ければ青グラデが背景に） */
  background: #1e3a8a linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 84px 24px 92px;
  overflow: hidden;
}
/* 写真の上にかぶせる青オーバーレイ（写真設定時に効く） */
.uf-hero.has-photo {
  background-image: url(images/hero.jpg);
  background-size: cover;
  background-position: bottom;
}
.uf-hero.has-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(20,38,80,.90) 0%, rgba(30,58,138,.82) 45%, rgba(37,99,235,.62) 100%);
}
.uf-hero-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
.uf-hero .uf-eyebrow { color: #fdba74; }
.uf-hero-title {
  color: #fff;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0 0 20px;
}
.uf-hero-lead {
  color: rgba(255,255,255,.88);
  font-size: 1.05rem;
  line-height: 1.95;
  max-width: 640px;
  margin: 0 0 28px;
}
.uf-btn {
  display: inline-block;
  background: var(--u-accent);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: var(--u-radius);
  transition: background-color .15s ease;
}
.uf-btn:hover { background: var(--u-accent-dark); }

/* ---------- GUIDE 3カード ---------- */
.uf-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.uf-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  padding: 28px 24px;
  text-decoration: none;
  background: #fff;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
.uf-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -14px rgba(31,58,95,.22);
}
.uf-feature-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--u-navy-50);
  color: var(--u-navy);
  border-radius: 50%;
  font-size: 22px;
  margin-bottom: 16px;
}
.uf-feature-title { color: var(--u-navy); font-weight: 800; font-size: 1.15rem; margin-bottom: 8px; }
.uf-feature-desc { color: var(--u-text); font-size: .9rem; line-height: 1.8; margin-bottom: 14px; }
.uf-feature-more { margin-top: auto; }

/* ---------- 新着コラム グリッド ---------- */
.uf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.uf-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
.uf-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgba(31,58,95,.22); }
.uf-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
  overflow: hidden;
}
.uf-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uf-card-noimg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
.uf-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.uf-card-cat {
  align-self: flex-start;
  background: var(--u-navy); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 10px;
}
.uf-card-title { color: var(--u-text); font-weight: 700; line-height: 1.6; font-size: .98rem; }
.uf-card-excerpt {
  color: var(--u-muted);
  font-size: 13px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uf-card-date { color: var(--u-muted); font-size: 12px; margin-top: auto; }

/* ---------- カテゴリーから探す ---------- */
.uf-cats { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 24px; }
.uf-cat {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  padding: 12px 18px;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.uf-cat:hover { border-color: var(--u-navy); background: var(--u-navy-50); }
.uf-cat-name { color: var(--u-navy); font-weight: 700; font-size: .95rem; }
.uf-cat-count {
  color: var(--u-accent-dark); background: #ffedd5;  /* 淡いオレンジ */
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border-radius: 999px;
}

/* 記事のSNSシェア（上下）・シェアボタン・フォローボタンを非表示 */
.sns-share, .sns-share-buttons, .sns-buttons, .sns-follow { display: none !important; }

/* =====================================================================
   記事末尾 bidscope 無料登録CTA（プロダクト訴求＝緑ブランド）
   ===================================================================== */
.union-cta {
  margin: 52px 0 8px;
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 62%);
  border: 1px solid #d1fae5;
  border-radius: 16px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 24px;
  align-items: center;
}
.union-cta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #d1fae5; border-radius: 999px;
  padding: 7px 15px; font-size: 11.5px; font-weight: 700; color: #334155;
  box-shadow: 0 2px 12px -6px rgba(5,150,105,.45);
  margin-bottom: 18px;
  white-space: nowrap;   /* 折り返さない */
}
.union-cta-badge .uc-check { color: #059669; font-weight: 900; }
.union-cta-badge .uc-price { color: #059669; }
.union-cta-title {
  font-size: 1.75rem; font-weight: 800; color: #0f172a;
  line-height: 1.42; letter-spacing: -.01em; margin: 0 0 14px;
}
.union-cta-sub { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0 0 10px; }
.union-cta-text { font-size: .9rem; color: #64748b; line-height: 1.85; margin: 0 0 24px; }
.union-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--u-accent); color: #fff !important; text-decoration: none !important;
  font-weight: 800; font-size: 1.05rem; padding: 15px 34px; border-radius: 10px;
  box-shadow: 0 12px 26px -10px rgba(249,115,22,.55);
  transition: background-color .15s ease, transform .15s ease;
}
.union-cta-btn:hover { background: var(--u-accent-dark); transform: translateY(-2px); }
.union-cta-figure { margin: 0; text-align: center; }
.union-cta-figure img { width: 100%; height: auto; max-width: 560px; display: inline-block; }
@media screen and (max-width: 768px) {
  .union-cta { grid-template-columns: 1fr; padding: 28px 22px; gap: 20px; }
  .union-cta-title { font-size: 1.45rem; }
}

/* ---------- アーカイブ上部のカテゴリー一覧 ---------- */
.uf-archive-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--u-border);
  grid-column: 1 / -1;   /* 一覧がグリッドでも全幅で最上段に */
  width: 100%;
}
.uf-anav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  color: var(--u-navy);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.uf-anav-item:hover { border-color: var(--u-navy); background: var(--u-navy-50); color: var(--u-navy); }
.uf-anav-item.is-active { background: var(--u-navy); border-color: var(--u-navy); color: #fff; }
.uf-anav-count {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: #fff; background: var(--u-accent);
  border-radius: 999px;
}
.uf-anav-item.is-active .uf-anav-count { background: var(--u-accent); }

/* ---------- アーカイブ／検索 一覧ページの補助要素 ---------- */
.uf-archive-desc {
  color: var(--u-muted);
  font-size: .92rem;
  line-height: 1.85;
  margin: -8px 0 26px;
}
.uf-empty {
  color: var(--u-muted);
  font-size: .95rem;
  padding: 32px 0 8px;
}
.uf-pagination { margin-top: 36px; }
.uf-pagination .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.uf-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  color: var(--u-navy);
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.uf-pagination a.page-numbers:hover {
  border-color: var(--u-navy); background: var(--u-navy-50); color: var(--u-navy);
}
.uf-pagination .page-numbers.current {
  background: var(--u-navy); border-color: var(--u-navy); color: #fff;
}
.uf-pagination .page-numbers.dots { border: none; background: transparent; }

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 834px) {
  .uf-features, .uf-grid { grid-template-columns: 1fr 1fr; }
  .uf-hero-title { font-size: 2rem; }
  .uf-hero { padding: 60px 20px 64px; }
  .uf-section { padding: 40px 20px 8px; }
}
@media screen and (max-width: 519px) {
  .uf-features, .uf-grid { grid-template-columns: 1fr; }
  .uf-hero-title { font-size: 1.7rem; }
}

/* ---------- コラム一覧ページ：上部カテゴリーインデックス ---------- */
html { scroll-behavior: smooth; }
.uf-cat-nav {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 4px 0 36px; padding: 16px;
  background: var(--u-bg, #F4F6F8); border-radius: 12px;
}
.uf-cat-navlink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--u-line, #E3E7EC);
  color: var(--u-navy, #1e40af); font-weight: 700; font-size: 0.82rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.uf-cat-navlink:hover { background: var(--u-navy, #1e40af); color: #fff; border-color: var(--u-navy, #1e40af); }
.uf-cat-navlink .uf-cat-navn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 0.68rem; color: #fff; background: var(--u-accent, #f97316);
  border-radius: 999px;
}
.uf-cat-navlink:hover .uf-cat-navn { background: #fff; color: var(--u-navy, #1e40af); }

/* ---------- コラム一覧ページ：カテゴリー別ブロック ---------- */
.uf-cat-block { margin: 0 0 44px; scroll-margin-top: 24px; }
.uf-cat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 2px solid var(--u-line, #E3E7EC);
  padding-bottom: 10px; margin-bottom: 20px;
}
.uf-cat-h {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.25rem; font-weight: 800; margin: 0;
  color: var(--u-navy, #1e40af);
  border-left: 5px solid var(--u-navy, #1e40af);
  padding-left: 12px; line-height: 1.3;
}
.uf-cat-h .uf-cat-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  font-size: 0.8rem; font-weight: 700;
  color: #fff; background: var(--u-accent, #f97316);
  border-radius: 999px;
}

/* ---------- コラム一覧ページのページネーション ---------- */
.uf-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 36px 0 8px; }
.uf-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--u-line, #E3E7EC); border-radius: 8px;
  color: var(--u-navy, #1e40af); background: #fff;
  font-weight: 700; text-decoration: none; line-height: 1;
}
.uf-pager .page-numbers.current { background: var(--u-navy, #1e40af); color: #fff; border-color: var(--u-navy, #1e40af); }
.uf-pager .page-numbers:hover:not(.current) { background: #f4f6f8; }
.uf-pager .page-numbers.dots { border: 0; }

/* ---------- 記事下「関連記事」の抜粋を2行まで ---------- */
.related-entry-card-snippet {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
}

/* ---------- 内部ブログカードの調整（2026-06-22） ---------- */
/* サイト名（favicon＋ドメイン）と投稿日を非表示。空になるfooterごと消して余白を防ぐ */
.blogcard-site.internal-blogcard-site,
.blogcard-date.internal-blogcard-date,
.blogcard-post-date.internal-blogcard-post-date,
.blogcard-footer.internal-blogcard-footer { display: none !important; }

/* カード内パディングを均等に整える（左右に余白・上下そろえる） */
.blogcard.internal-blogcard { padding: 14px 16px !important; }

/* カード下の余白(margin-bottom)を1emに */
.blogcard-wrap.internal-blogcard-wrap,
.blogcard.internal-blogcard { margin-bottom: 1em !important; }

/* 文字色はデフォルトの黒 */
.internal-blogcard-title,
.internal-blogcard-title a,
.internal-blogcard-snippet { color: #333 !important; }

/* リンクの下線を消す */
.blogcard-wrap.internal-blogcard-wrap,
.blogcard-wrap.internal-blogcard-wrap:hover,
.internal-blogcard-title,
.internal-blogcard-title a,
.internal-blogcard-snippet { text-decoration: none !important; }

/* ディスクリプション（抜粋）は2行まで */
.internal-blogcard-snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* hoverでほわっと浮く（少し持ち上がる＋やわらかい影）。背景の色変化は無し */
.blogcard-wrap.internal-blogcard-wrap {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.blogcard-wrap.internal-blogcard-wrap:hover {
  background-color: var(--cocoon-white-color) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
}
.blogcard-wrap.internal-blogcard-wrap:hover .blogcard-thumbnail img {
  opacity: 1 !important;
  transform: none !important;
}