/* =====================================================================================
 * site.css — noside-ltd.co.jp 案件レイヤCSS(旧swell_child style.cssから移植)
 * -------------------------------------------------------------------------------------
 * ベーステーマ(noside-base-theme)のファイルとは分離した「この案件専用」のCSS。
 * ベース更新時もこのファイルは保持する。読み込みは inc/site-enqueue.php。
 *
 * 収録(移植元の章番号): 1-4 アーカイブ/タブ/テックカード/FAQ ｜ 8 ユーティリティ
 * ｜ ns-auto-*・ns-auto-box 記事装飾 ｜ 10-15 postlist/CTA/検索/アーカイブハブ/top検索/detach
 * ※コメント内に「アスタリスク直後のスラッシュ」を書くと早期終了して直後のルールが
 *   破棄される(2026-07-03に実際に発生)。クラス名の列挙は区切りに「・」を使うこと。
 * ｜ 記事目次(ns-toc) ｜ ns-sitefooter(SWELL .l-footer統合部は除外) ｜ FAB ｜ Zoom日時ピッカー
 * ｜ cmx-* 図解(原本24行目以降のみ=空コメント記号バグ回避)
 * スコープ書換: .entry-content → .entry-content(新テーマの本文ラッパ)
 * ===================================================================================== */
/* =====================================================================================
 * 1. アーカイブ冒頭コンテンツ
 * ===================================================================================== */
.ns-archive-intro {
    margin: 1.5rem 0;
}

.ns-archive-intro p,
.ns-archive-intro .wp-block-paragraph {
    margin: 1em 0;
}

.ns-archive-intro ul,
.ns-archive-intro ol {
    margin: 0 0 1.25em 1.25em;
}

.ns-archive-intro.is-layout-flow > * + * {
    margin-block-start: var(--wp--style--block-gap, 1rem);
}

.ns-archive-intro__fallback {
    color: #888;
    font-style: italic;
}


/* =====================================================================================
 * 2. ブログ カテゴリーフィルタータブ
 * ===================================================================================== */
.ns-blog-cat-tabs {
    margin: 1rem 0 1.5rem;
}

.ns-blog-cat-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ns-blog-cat-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.ns-blog-cat-tabs__item:hover {
    border-color: var(--tab-color, #333);
    color: var(--tab-color, #333);
    background: #fafafa;
    text-decoration: none;
}

.ns-blog-cat-tabs__item.is-active {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.ns-blog-cat-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(0,0,0,0.08);
    font-size: 0.6875rem;
    line-height: 1;
}

.ns-blog-cat-tabs__item.is-active .ns-blog-cat-tabs__count {
    background: rgba(255,255,255,0.2);
}


/* =====================================================================================
 * 3. テックカード（ブログ・イベント・リソース・業界 共通）
 *    ★ コンパクト設計：ディスクリプション削除、日付+カテゴリー1行化
 * ===================================================================================== */
.ns-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

@media (max-width: 600px) {
    .ns-tech-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.ns-tech-card {
    position: relative;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
    /* A-2 ルール: border-left（左縦バー）禁止。アクセントは hover の影と top アクセント線で表現 */
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.ns-tech-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s ease;
}

.ns-tech-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: #d8d8d8;
    transform: translateY(-2px);
}

.ns-tech-card:hover::before {
    transform: scaleX(1);
}

/* --- カードリンク --- */
.ns-tech-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 8px !important;
    text-decoration: none;
    color: inherit;
}

/* --- メタ行（日付＋カテゴリー 横並び） --- */
.ns-tech-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ns-tech-card__date {
    font-size: 0.75rem;
    color: #999;
    letter-spacing: 0.03em;
    white-space: nowrap;
    line-height: 1;
}

/* --- カテゴリーバッジ（色分け対応） --- */
.ns-tech-card__cat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--cat-bg, #f0f0f0);
    color: var(--cat-text, #666);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* --- タイトル --- */
.ns-tech-card__title {
    font-size: 1.1rem !important;
    font-weight: 700;
    line-height: 1.6;
    margin: 0;
    color: #1a1a1a;
    flex: 1;
}

@media (max-width: 600px) {
    .ns-tech-card__title {
        font-size: 1.15rem  !important;
        line-height: 1.55;
		margin:0 0 4px 0 !important;
    }
}

/* --- フッター（コンパクト版） --- */
.ns-tech-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 8px !important;
}

.ns-tech-card__read {
    font-size: 0.75rem;
    color: #999;
    transition: color 0.2s;
    white-space: nowrap;
}

.ns-tech-card__read-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    color: #999;
    transition: color 0.2s, transform 0.2s;
    vertical-align: middle;
    margin-left: 2px;
}

.ns-tech-card__read-icon svg {
    width: 100%;
    height: 100%;
}

.ns-tech-card:hover .ns-tech-card__read {
    color: var(--card-accent, #333);
}

.ns-tech-card:hover .ns-tech-card__read-icon {
    color: var(--card-accent, #333);
    transform: translateX(2px);
}

/* --- 旧要素（互換・他テンプレ用に残す） --- */
.ns-tech-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ns-tech-card__line {
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.ns-tech-card__body {
    flex: 1;
}

.ns-tech-card__desc {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ns-tech-card__more {
    font-size: 0.75rem;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.08em;
    transition: color 0.2s;
}

.ns-tech-card:hover .ns-tech-card__more {
    color: #333;
}

.ns-tech-card__icon {
    display: flex;
    width: 16px;
    height: 16px;
    color: #999;
    transition: color 0.2s, transform 0.2s;
}

.ns-tech-card__icon svg {
    width: 100%;
    height: 100%;
}

.ns-tech-card:hover .ns-tech-card__icon {
    color: #333;
    transform: translateX(3px);
}


/* =====================================================================================
 * 4. FAQアコーディオン
 * ===================================================================================== */
.ns-faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.ns-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ns-faq-item {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.ns-faq-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.ns-faq-question {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 20px 24px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s;
}

.ns-faq-question:hover {
    background: #fafafa;
}

.ns-faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

.ns-faq-icon.-q { background: #1a1a1a; color: #fff; }
.ns-faq-icon.-a { background: #e74c3c; color: #fff; }

.ns-faq-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
    color: #1a1a1a;
}

.ns-faq-toggle-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ns-faq-toggle-icon::before,
.ns-faq-toggle-icon::after {
    content: '';
    position: absolute;
    background: #999;
    transition: transform 0.25s ease;
}

.ns-faq-toggle-icon::before {
    top: 50%; left: 2px; right: 2px; height: 2px;
    transform: translateY(-50%);
}

.ns-faq-toggle-icon::after {
    left: 50%; top: 2px; bottom: 2px; width: 2px;
    transform: translateX(-50%);
}

.ns-faq-item.is-open .ns-faq-toggle-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.ns-faq-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.ns-faq-answer-inner {
    display: flex;
    gap: 14px;
    padding: 0 24px 24px;
    align-items: flex-start;
}

.ns-faq-body {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #444;
}

.ns-faq-body p:first-child { margin-top: 0; }
.ns-faq-body p:last-child { margin-bottom: 0; }


/* =====================================================================================
 * 8. ユーティリティ
 * ===================================================================================== */
.u-text-center { text-align: center; }




/* =====================================================
   ノーサイド記事自動化 専用ユーティリティクラス
   以下のCSSをWP管理画面の「追加CSS」または
   子テーマの style.css 末尾に貼り付けてください。
   - プレフィックスは ns-auto- で統一（サイト制作時のCSS と重複防止）
   - モバイルファースト設計
   - SWELL のデザインテイストと整合
   - 「左側に太い縦線だけのボックス」のようなAI生成感の強い装飾は避けています
   ===================================================== */

/* -----------------------------------------------------
   ns-auto-big-red：大きい赤太字（超強調用）
   1記事に1〜2回まで。記事の核となる結論で使用
   ----------------------------------------------------- */
.ns-auto-big-red {
  font-size: 1.18em;
  font-weight: 700;
  color: #c0392b;
  letter-spacing: 0.02em;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .ns-auto-big-red {
    font-size: 1.22em;
  }
}

/* -----------------------------------------------------
   ns-auto-highlight：背景色付き強調ボックス
   セクションの結論サマリ・読者へのメッセージ
   ----------------------------------------------------- */
.ns-auto-highlight {
  background: #fff8e7;
  padding: 14px 16px;
  border-radius: 6px;
  margin: 1.2em 0;
  line-height: 1.85;
  color: #4a3a00;
}
.ns-auto-highlight strong {
  color: #8a5a00;
}

/* -----------------------------------------------------
   ns-auto-large：テキスト拡大（1.15em）
   重要な1文を強調したい時のインライン装飾
   ----------------------------------------------------- */
.ns-auto-large {
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* -----------------------------------------------------
   ns-auto-note：補足コメント風の装飾
   「補足ですが〜」「ちなみに〜」など、本筋とは別の補足
   ----------------------------------------------------- */
.ns-auto-note {
  background: #f4f6f8;
  padding: 12px 14px;
  margin: 1em 0;
  font-size: 0.94em;
  color: #4d5a66;
  line-height: 1.8;
  border-radius: 4px;
}
.ns-auto-note::before {
  content: "📝 ";
  margin-right: 4px;
  font-size: 0.95em;
}

/* -----------------------------------------------------
   ns-auto-quote-accent：引用強調
   「読者からよく聞く声」「現場の典型的な悩み」演出
   ----------------------------------------------------- */
.ns-auto-quote-accent {
  background: #f7f4ee;
  padding: 14px 18px;
  margin: 1.2em 0;
  font-size: 0.96em;
  font-style: normal;
  color: #5a4a2a;
  line-height: 1.85;
  border-radius: 4px;
  position: relative;
}
.ns-auto-quote-accent::before {
  content: "“";
  font-size: 2.4em;
  color: #c9b074;
  line-height: 0.6;
  margin-right: 6px;
  vertical-align: -0.35em;
  font-family: Georgia, serif;
}

/* -----------------------------------------------------
   ns-auto-faq：FAQ用カード型デザイン
   左側の太い縦線ボーダーは廃止
   モバイルファースト・SWELLとの整合性重視
   ----------------------------------------------------- */
.ns-auto-faq {
  margin: 1.5em 0;
}
.ns-auto-faq-item {
  background: #fcfaf5;
  padding: 16px 2px;
  margin: 0 0 14px;
  border-radius: 8px;
}
.ns-auto-faq-item:last-child {
  margin-bottom: 0;
}
.ns-auto-faq-q,
.ns-auto-faq-a {
  margin: 0;
  line-height: 1.75;
  display: block;
}
.ns-auto-faq-q {
  font-weight: 700;
  color: #2c2a26;
  font-size: 0.98em;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #e2dccd;
}
.ns-auto-faq-a {
  color: #3a3a3a;
  font-size: 0.95em;
}
.ns-auto-faq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.78em;
  font-weight: 700;
  margin-right: 10px;
  vertical-align: middle;
  letter-spacing: 0;
  flex-shrink: 0;
}
.ns-auto-faq-badge-q {
  background: #c9b074;
  color: #fff;
}
.ns-auto-faq-badge-a {
  background: #6b8e6f;
  color: #fff;
}

@media (min-width: 768px) {
  .ns-auto-faq-item {
    padding: 18px 3px;
  }
  .ns-auto-faq-q {
    font-size: 1em;
  }
  .ns-auto-faq-a {
    font-size: 0.96em;
  }
}


/* =====================================================================================
   ノーサイド記事自動化 装飾枠（ns-auto-box）：種別ボックス
   ─ 本文中の「要点・メリット・注意・警告・回避・メモ・補足」を出し分ける独自枠。
     SWELL 標準の is-style-icon_* / is-style-big_icon_*（左アイコンで SP の本文が
     右の狭い列に押し込まれ、カラフルで AI 生成感が強い）を全面置換するもの。
   ─ §4-4 厳守：縦棒/border-left なし・装飾 ::before 罫線/文字 content なし・
     装飾アイコン散らしなし・多色 callout 廃止・赤ベタ塗りなし。
     色は「記事内赤 #c0392b / 墨 #1a1a1a」の2色＋クリーム/白の地のみ。
     種別の差は色数を増やさず「構造・質感」で表す。
   ─ 姉妹メディア「AI経営手帖」(keieiax.jp) の ns-ai-box と構造・余白・8種別の
     質感差を統一（あちらは ns-ai- / 明朝見出し。noside 本体は ns-auto- / 記事が
     ゴシックのため見出しもゴシック継承）。
   ─ 置き場所＝子テーマ style.css に集約（§4-4：追加CSSは使わない。既存 ns-auto-*
     群と同居）。
   ===================================================== */
.entry-content{
  --nsab-red:    #c0392b;                 /* 記事内強調赤(ラベル塗り・strong)。ブランド赤#ea4341より落ち着いた在来色 */
  --nsab-ink:    #1a1a1a;                 /* 墨(見出し・slate相当ラベル) */
  --nsab-cream:  #f7f2ea;                 /* 暖クリーム地(要点・メリット) */
  --nsab-border: rgba(26, 26, 26, 0.12);
  --nsab-body:   #333;                    /* 本文 */
}

.entry-content .ns-auto-box {
  box-sizing: border-box;
  max-width: 100%;
  margin: .85em 0;
  padding: .9em 1.15em;
  background: #fff;
  border: 1px solid var(--nsab-border);
  border-radius: 7px;
  overflow-wrap: break-word;
  word-break: normal;
}
/* ボックスが本文より浮かないよう、直後の要素との余白も詰める(左アイコン枠時代の過剰余白を解消) */
.entry-content .ns-auto-box + * { margin-top: .85em; }
/* wp:group の内側コンテナ余白を打ち消し(枠は外側 div が持つ)。WP のレイアウト差で
   inner-container が出ない場合に備え、直下の最初/最後の余白も併せて詰める */
.entry-content .ns-auto-box > .wp-block-group__inner-container { padding: 0; margin: 0; }
.entry-content .ns-auto-box > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.entry-content .ns-auto-box > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.entry-content .ns-auto-box > :first-child { margin-top: 0; }
.entry-content .ns-auto-box > :last-child { margin-bottom: 0; }

.entry-content .ns-auto-box__head {
  margin: 0 0 .35em;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--nsab-ink);
}
/* ラベルは HTML 実テキスト(::before の文字 content は使わない)。角ばったタグ */
.entry-content .ns-auto-box__label {
  display: inline-block;
  margin-right: .6em;
  padding: .14em .55em;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  color: #fff;
  background: var(--nsab-ink);
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: .14em;
}
.entry-content .ns-auto-box__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--nsab-body);
}
.entry-content .ns-auto-box__text + .ns-auto-box__text { margin-top: .7em; }
/* 枠内の強調は記事内赤で締める */
.entry-content .ns-auto-box__text strong { color: var(--nsab-red); font-weight: 700; }
/* 見出しなし(run-in ラベル)の短文ノート用 */
.entry-content .ns-auto-box__text .ns-auto-box__label { margin-right: .55em; vertical-align: .12em; }

/* 要点・結論：クリーム地の見出し付きパネル(見出し下に全幅の中立ヘアライン) */
.entry-content .ns-auto-box--point {
  background: var(--nsab-cream);
  border-color: rgba(192, 57, 43, .16);
  padding-top: .8em;
}
.entry-content .ns-auto-box--point .ns-auto-box__label { background: var(--nsab-red); }
.entry-content .ns-auto-box--point .ns-auto-box__head {
  font-size: 17.5px;
  padding-bottom: .45em;
  margin-bottom: .5em;
  border-bottom: 1px solid var(--nsab-border);
}

/* メリット・推奨：クリーム地の角タグ枠(ラベル墨) */
.entry-content .ns-auto-box--good {
  background: var(--nsab-cream);
  border-color: rgba(192, 57, 43, .16);
}
.entry-content .ns-auto-box--good .ns-auto-box__label { background: var(--nsab-ink); }

/* 注意・回避：淡い赤ウォッシュの角タグ枠 */
.entry-content .ns-auto-box--attention,
.entry-content .ns-auto-box--batsu {
  background: rgba(192, 57, 43, .05);
  border-color: rgba(192, 57, 43, .18);
}
.entry-content .ns-auto-box--attention .ns-auto-box__label { background: var(--nsab-red); }
.entry-content .ns-auto-box--batsu .ns-auto-box__label { background: var(--nsab-ink); }

/* 強い警告：赤ウォッシュを一段濃く＋見出し太字(色帯は使わない＝AI生成風callout回避) */
.entry-content .ns-auto-box--caution {
  background: rgba(192, 57, 43, .085);
  border-color: rgba(192, 57, 43, .22);
}
.entry-content .ns-auto-box--caution .ns-auto-box__label { background: var(--nsab-red); }
.entry-content .ns-auto-box--caution .ns-auto-box__head { font-weight: 700; }

/* メモ・補足：枠なしの上下ヘアライン・アサイド(左右paddingゼロで本文最大幅) */
.entry-content .ns-auto-box--memo,
.entry-content .ns-auto-box--info {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--nsab-border);
  border-bottom: 1px solid var(--nsab-border);
  border-radius: 0;
  padding: .8em 0;
}
.entry-content .ns-auto-box--memo .ns-auto-box__label,
.entry-content .ns-auto-box--info .ns-auto-box__label {
  color: var(--nsab-ink);
  background: transparent;
  border: 1px solid var(--nsab-border);
}

/* 要点 別案B：墨のヘッダーバンド型(__bar を先頭に置く構造) */
.entry-content .ns-auto-box--point-band {
  padding: 0;
  background: var(--nsab-cream);
  border-color: rgba(192, 57, 43, .16);
  overflow: hidden;
}
.entry-content .ns-auto-box--point-band .ns-auto-box__bar {
  margin: 0;
  padding: .45em 1.15em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: var(--nsab-ink);
}
.entry-content .ns-auto-box--point-band .ns-auto-box__head { margin: .7em 1.15em .3em; font-size: 17px; }
.entry-content .ns-auto-box--point-band .ns-auto-box__text { margin: 0 1.15em .8em; }

/* チェックリスト(is-style-check-list 置換)：機能アイコン=チェックのみ・SVG背景 */
.entry-content .ns-auto-list--check { list-style: none; padding-left: 0; margin: 0; }
.entry-content .ns-auto-list--check > li { position: relative; padding-left: 1.6em; }
.entry-content .ns-auto-list--check > li + li { margin-top: .45em; }
.entry-content .ns-auto-list--check > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  width: 1em;
  height: 1em;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23c0392b'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2013l4%204L19%207'/%3E%3C/svg%3E");
}

/* SP：paddingを大幅に詰める(テキスト表示領域を最大化) */
@media (max-width: 600px) {
  .entry-content .ns-auto-box { padding: .7em .85em; margin: .7em 0; }
  .entry-content .ns-auto-box + * { margin-top: .7em; }
  .entry-content .ns-auto-box--point { padding-top: .65em; }
  .entry-content .ns-auto-box--memo,
  .entry-content .ns-auto-box--info { padding: .65em 0; }
  .entry-content .ns-auto-box__head { font-size: 16px; }
  .entry-content .ns-auto-box--point .ns-auto-box__head { font-size: 16.5px; }
  .entry-content .ns-auto-box--point-band .ns-auto-box__head { margin-left: .9em; margin-right: .9em; }
  .entry-content .ns-auto-box--point-band .ns-auto-box__text { margin-left: .9em; margin-right: .9em; }
  .entry-content .ns-auto-box--point-band .ns-auto-box__bar { padding-left: .9em; padding-right: .9em; }
}


/* =====================================================================================
 * 10. [ns_post_list] ショートコード用デザイン
 *    （対応するPHP実装は functions.php §17）
 *
 *    HTML構造:
 *      <div class="ns-postlist" data-pc-col data-sp-col data-scroll
 *           style="--ns-pc-cols: N">
 *        <header class="ns-postlist__header" data-cat-id="N">  ← NEW: 統合ヘッダー
 *          <a class="ns-postlist__heading" href="archive_url">
 *            <h2 class="ns-postlist__heading-title">カテゴリー名</h2>
 *            <span class="ns-postlist__heading-cta">
 *              <span class="ns-postlist__heading-cta-text">すべて見る</span>
 *              <span class="ns-postlist__heading-cta-arrow"></span>
 *            </span>
 *          </a>
 *        </header>
 *        <div class="ns-postlist__viewport">
 *          <ul class="ns-postlist__list">
 *            <li class="ns-postlist__item">
 *              <a class="ns-postlist__link">
 *                <div class="ns-postlist__thumb">
 *                  <span class="ns-postlist__cat" data-cat-id>...</span>
 *                  <img class="ns-postlist__img"> | .ns-postlist__img-placeholder
 *                </div>
 *                <div class="ns-postlist__body">
 *                  <h3 class="ns-postlist__title">
 *                  <time class="ns-postlist__date">
 *                </div>
 *              </a>
 *            </li>
 *          </ul>
 *        </div>
 *        <!-- 下部もっと見るボタンは廃止（ヘッダーCTAに統合） -->
 *      </div>
 *
 *    挙動: PC・SP共に横スクロール統一
 *      - 列数指定（PC: --ns-pc-cols / SP: data-sp-col）でカード幅が決まる
 *      - 列数を超える記事は横スクロール
 *      - カテゴリー一覧への導線はヘッダー右側の「すべて見る →」に集約（縦長解消）
 *
 *    [カテゴリーバッジ・ヘッダー色] functions.php §16 が全term分のCSS変数を head に出力
 *      → [data-cat-id="N"] { --cat-color: ...; } で自動色付け
 *
 *    10-1.  ラッパー（カテゴリー間隔含む）
 *    10-2.  ヘッダー: カテゴリー見出し+CTA統合（NEW）
 *    10-3.  viewport（スクロール領域）+ list
 *    10-4.  PC列数別カード幅
 *    10-5.  SP列数別カード幅
 *    10-6.  li / link
 *    10-7.  thumb / cat-badge / img
 *    10-8.  body / title / date（PC/SP共に2行省略）
 *    10-9.  スクロールフェード（右端の上品な視覚ヒント）
 *    10-10. SWELL .alignfull > * { margin-bottom: 2em } の抑制（NEW）
 *    10-11. 旧下部もっと見るボタン（互換: more_text 明示時のみ）
 *    10-12. アクセシビリティ
 * ===================================================================================== */

/* -------------------------------------------------------------------------------------
 * 10-1. ラッパー
 *       カテゴリー間の縦間隔は SWELL の .alignfull 強制 margin を 10-10 で抑え、
 *       自前の margin-bottom: 32px(PC) / 24px(SP) で制御する。
 * ------------------------------------------------------------------------------------- */
.ns-postlist{
  position: relative;
  margin: 0 0 32px;
  font-feature-settings: "palt" 1;
}
@media (max-width: 599px){
  .ns-postlist{
    /* SP: カテゴリー間隔 0px。
       将来余白が欲しくなった場合は 2〜3px 程度を上限に調整。 */
    margin: 0 0 0;
  }
}

/* -------------------------------------------------------------------------------------
 * 10-1b. 記事統合セクション(.ns-articles-duo / .ns-duo-grid)
 *   新着+人気を「1つの2段横スライド」に統合(2026-07-03・嶋崎要望)。
 *   ★AI経営手帖の最新記事のように、上段=新着 / 下段=人気を2段まとめて表示し、横スクロールで
 *     2段が同時に動く。単一スクロールコンテナ .ns-duo-grid__track を grid-auto-flow:column の
 *     2行グリッドにし、DOM順[新着1,人気1,新着2,人気2,…]で列(縦の組)ごとに上=新着/下=人気を揃える。
 *   カードは .ns-postlist__* を再利用(見た目統一)。操作JS= inc/site-shortcodes.php ns_articles_duo_js。
 * ------------------------------------------------------------------------------------- */
.ns-articles-duo{ margin: 0 0 8px; }
.ns-duo-grid__viewport{ position: relative; }
.ns-duo-grid__track{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;        /* 2段 */
  grid-auto-columns: 232px;             /* PC: 1列(縦の組)の幅 */
  gap: 16px;
  margin: 0;
  padding: 4px 2px 14px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.ns-duo-grid__track::-webkit-scrollbar{ display: none; }
.ns-duo-grid__track.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.ns-duo-grid .ns-postlist__item{ margin: 0; scroll-snap-align: start; }
/* 統合ヘッダーは .ns-postlist ラッパ(=reveal JS の data-revealed 付与先)を持たないため、
   reveal 依存の opacity:0 初期状態を外して常時表示にする(見出しが消える不具合の対処)。 */
.ns-duo-grid .ns-postlist__heading-deco,
.ns-duo-grid .ns-postlist__heading-title,
.ns-duo-grid .ns-postlist__heading-cta{ opacity: 1; transform: none; }
.ns-duo-grid .ns-postlist__heading-divider{ opacity: 0.55; transform: none; }
@media (max-width: 599px){
  .ns-duo-grid__track{
    grid-auto-columns: clamp(150px, 44vw, 176px);   /* SP: 約2列可視 */
    gap: 12px;
    padding: 2px 0 12px;
  }
}

/* -------------------------------------------------------------------------------------
 * 10-2. ヘッダー: カテゴリー見出し + 「すべて見る →」統合（v3 / 2026-05-04）
 *
 *   構成（PHP §17 が出力する HTML 構造）:
 *     .ns-postlist__header                       ← data-cat-id でカテゴリー色を流入
 *       a.ns-postlist__heading                   ← 見出し全体を1リンク化
 *         .ns-postlist__heading-deco             ← 装飾: 浮遊する3つのカテゴリー色ドット
 *           .ns-postlist__heading-deco-dot --1/--2/--3
 *         .ns-postlist__heading-title            ← カテゴリー名テキスト（shimmer）
 *         .ns-postlist__heading-divider          ← 縦の小パイプ（カテゴリー色）
 *         .ns-postlist__heading-cta              ← 「すべて見る →」
 *
 *   デザイン要素（"心を掴む" コンセプト）:
 *     1) フローティング・ドット粒子（カテゴリー色、3つが互い違いに浮遊）
 *     2) テキスト・シマー（hover で光が文字を左→右に走る gradient text）
 *     3) Reveal アニメ（IntersectionObserver で viewport in 時に slide-up + fade）
 *     4) 縦小パイプでカテゴリー名と CTA を視覚的に連結
 *
 *   ※ 順序非依存・カテゴリー名の長短に依存しない汎用デザイン
 *   ※ JS依存は IntersectionObserver と scroll listener のみ（軽量、prm尊重）
 * ------------------------------------------------------------------------------------- */

/* --- ヘッダー外枠 --- */
.ns-postlist__header{
  position: relative;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
@media (max-width: 599px){
  .ns-postlist__header{
    margin: 0 0 12px;
    padding: 0 0 10px;
  }
}

/* --- 見出し全体（リンク） — flex で「装飾→タイトル→区切り→CTA」を直列配置 --- */
.ns-postlist__heading,
a.ns-postlist__heading{
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-decoration: none !important;
  color: #0f172a !important;
  background: none !important;
  /* タッチ環境で hover 残留しないよう transform は受けず、子要素で制御 */
}
.ns-postlist__heading::before,
.ns-postlist__heading::after{
  content: none !important;
  display: none !important;
}
@media (max-width: 599px){
  .ns-postlist__heading,
  a.ns-postlist__heading{
    gap: 10px;
  }
}

/* --- ① 装飾要素: 浮遊する3つのカテゴリー色ドット ---
   カテゴリー名の左に控えめに置き、ふわふわと浮遊する。
   左縦バーではなく、ジオメトリックで動きのある「点群」装飾。 */
.ns-postlist__heading-deco{
  position: relative;
  display: inline-block !important;
  flex: 0 0 auto;
  width: 28px;
  height: 26px;
  margin-right: 4px;
}
.ns-postlist__heading-deco-dot{
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--cat-color, #ea4341);
  will-change: transform, opacity;
}
/* 主役ドット — はっきり濃く、ふわっと大きめに浮遊 */
.ns-postlist__heading-deco-dot--1{
  top: 6px;  left: 0;   width: 9px; height: 9px;
  opacity: 1;
  box-shadow: 0 0 0 0 var(--cat-color, #ea4341);
  animation: nsDotFloatA 4.2s ease-in-out infinite;
}
/* 中間ドット — 中央付近を漂う */
.ns-postlist__heading-deco-dot--2{
  top: 15px; left: 11px; width: 6px; height: 6px;
  opacity: 0.75;
  animation: nsDotFloatB 5.1s ease-in-out infinite;
  animation-delay: -1.8s;
}
/* 端役ドット — 小ぶりに上方を彷徨う */
.ns-postlist__heading-deco-dot--3{
  top: 4px;  left: 18px; width: 5px; height: 5px;
  opacity: 0.9;
  animation: nsDotFloatC 4.6s ease-in-out infinite;
  animation-delay: -3.2s;
}
@keyframes nsDotFloatA{
  0%, 100%{ transform: translate(0, 0)     scale(1);    opacity: 1;    }
  33%     { transform: translate(1px, -4px)  scale(1.12); opacity: 1;    }
  66%     { transform: translate(-2px, 1px)  scale(0.95); opacity: 0.85; }
}
@keyframes nsDotFloatB{
  0%, 100%{ transform: translate(0, 0)     scale(1);    opacity: 0.75; }
  50%     { transform: translate(-2px, -3px) scale(1.25); opacity: 1;    }
}
@keyframes nsDotFloatC{
  0%, 100%{ transform: translate(0, 0)     scale(1);    opacity: 0.9;  }
  40%     { transform: translate(3px, 2px)  scale(1.2);  opacity: 1;    }
  70%     { transform: translate(-1px, -2px) scale(0.9);  opacity: 0.7;  }
}
@media (max-width: 599px){
  .ns-postlist__heading-deco{
    width: 22px; height: 22px;
  }
  .ns-postlist__heading-deco-dot--1{ top: 5px; left: 0;   width: 7px;   height: 7px;   }
  .ns-postlist__heading-deco-dot--2{ top: 12px; left: 9px; width: 5px;   height: 5px;   }
  .ns-postlist__heading-deco-dot--3{ top: 3px;  left: 14px; width: 4px;   height: 4px;   }
}

/* --- ② カテゴリー名テキスト + シマー効果（gradient text） ---
   通常時: 単色の濃グレー（読みやすさ優先）
   hover時: gradient が左→右に走る「光が文字を抜けていく」効果
   ※ background-clip: text は SWELL の background:none !important 等と
      競合しないよう、本要素では background: linear-gradient を明示で勝つ */
.ns-postlist__heading-title{
  position: relative;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: clamp(18px, 1.1vw + 0.6rem, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  color: #0f172a !important;
  font-feature-settings: "palt" 1;
  min-width: 0;
  white-space: nowrap;
  /* shimmer 用 gradient — hover 時に background-position を走らせる */
  background-image: linear-gradient(
    100deg,
    #0f172a 0%,
    #0f172a 38%,
    var(--cat-color, #ea4341) 50%,
    #0f172a 62%,
    #0f172a 100%
  ) !important;
  background-size: 250% 100% !important;
  background-position: 100% 0 !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text;
          background-clip: text;
  transition:
    background-position 0.85s cubic-bezier(.2, .8, .2, 1),
    -webkit-text-fill-color .25s ease,
            text-fill-color .25s ease;
}
.ns-postlist__heading-title::before,
.ns-postlist__heading-title::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
@media (max-width: 599px){
  .ns-postlist__heading-title{
    font-size: 16px !important;
    letter-spacing: 0.005em !important;
  }
}

/* --- ③ 縦の小パイプ（カテゴリー名と CTA の視覚連結） --- */
.ns-postlist__heading-divider{
  display: inline-block;
  flex: 0 0 auto;
  width: 1px;
  height: 14px;
  background: var(--cat-color, #cbd5e1);
  opacity: 0.55;
  border-radius: 1px;
  margin: 0 2px;
  transition: opacity .25s ease, height .25s cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 599px){
  .ns-postlist__heading-divider{
    height: 12px;
  }
}

/* --- ④ 「すべて見る →」CTA（カテゴリー色、テキスト + 矢印） --- */
.ns-postlist__heading-cta{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--cat-color, #475569) !important;
  white-space: nowrap;
  transition:
    color .15s ease,
    gap .25s cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 599px){
  .ns-postlist__heading-cta{
    font-size: 11.5px !important;
    letter-spacing: 0.04em !important;
    gap: 5px;
  }
}
.ns-postlist__heading-cta-text{
  position: relative;
}
.ns-postlist__heading-cta-text::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.ns-postlist__heading-cta-arrow{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 1px;
  margin-bottom: 1px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

/* --- hover インタラクション（!important 必須: SWELL color !important に勝つ） --- */
.ns-postlist__heading:hover .ns-postlist__heading-title{
  /* shimmer: gradient を左に流す + 文字色をカテゴリー色寄りに */
  background-position: -100% 0 !important;
  color: var(--cat-color, #ea4341) !important;
}
.ns-postlist__heading:hover .ns-postlist__heading-cta{
  gap: 9px;
}
.ns-postlist__heading:hover .ns-postlist__heading-cta-text::after{
  transform: scaleX(1);
  transform-origin: left center;
}
.ns-postlist__heading:hover .ns-postlist__heading-divider{
  opacity: 1;
  height: 18px;
}
.ns-postlist__heading:hover .ns-postlist__heading-deco-dot--1{
  animation-duration: 1.8s;
}
.ns-postlist__heading:hover .ns-postlist__heading-deco-dot--2{
  animation-duration: 2.1s;
}
.ns-postlist__heading:hover .ns-postlist__heading-deco-dot--3{
  animation-duration: 1.9s;
}

/* --- ⑤ Reveal アニメ（viewport 入ったタイミングで実行 / JS が data-revealed 付与） ---
   - prefers-reduced-motion 環境では JS 側で即座に revealed=true（アニメ無し） */
.ns-postlist__heading-deco,
.ns-postlist__heading-title,
.ns-postlist__heading-divider,
.ns-postlist__heading-cta{
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .55s cubic-bezier(.2, .8, .2, 1),
    transform .55s cubic-bezier(.2, .8, .2, 1),
    color .15s ease,
    gap .25s cubic-bezier(.2, .8, .2, 1),
    background-position .85s cubic-bezier(.2, .8, .2, 1);
}
.ns-postlist[data-revealed="true"] .ns-postlist__heading-deco{
  opacity: 1; transform: translateY(0);
  transition-delay: 0s;
}
.ns-postlist[data-revealed="true"] .ns-postlist__heading-title{
  opacity: 1; transform: translateY(0);
  transition-delay: .08s;
}
.ns-postlist[data-revealed="true"] .ns-postlist__heading-divider{
  opacity: 0.55; transform: translateY(0);
  transition-delay: .16s;
}
.ns-postlist[data-revealed="true"] .ns-postlist__heading-cta{
  opacity: 1; transform: translateY(0);
  transition-delay: .22s;
}
/* JSが動かない環境（noscript等）では即時表示 */
.no-js .ns-postlist__heading-deco,
.no-js .ns-postlist__heading-title,
.no-js .ns-postlist__heading-divider,
.no-js .ns-postlist__heading-cta{
  opacity: 1 !important;
  transform: none !important;
}

/* -------------------------------------------------------------------------------------
 * 10-3. viewport（スクロール領域）+ list（横スクロール統一）
 * ------------------------------------------------------------------------------------- */
.ns-postlist__viewport{
  position: relative;
  margin: 0;
  padding: 0;
}

.ns-postlist__list{
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  /* 左端をヘッダーと完全整列（padding: 0）。上下のみカードのhover持ち上がり用に余白 */
  margin: 0;
  padding: 4px 0 14px;
  list-style: none;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ns-postlist__list::-webkit-scrollbar{
  display: none;
}

/* -------------------------------------------------------------------------------------
 * 10-4. PC（600px以上）: 列数によるカード幅
 *       --ns-pc-cols は PHP側で style="--ns-pc-cols: N" 注入
 * ------------------------------------------------------------------------------------- */
@media (min-width: 600px){
  .ns-postlist__item{
    flex: 0 0 calc(
      (100% - 20px * (var(--ns-pc-cols, 3) - 1))
      / var(--ns-pc-cols, 3)
    );
    scroll-snap-align: start;
    min-width: 0;
  }
  /* 5列の時は gap を少し詰めて密度を保つ */
  .ns-postlist[data-pc-col="5"] .ns-postlist__list{
    gap: 16px;
  }
  .ns-postlist[data-pc-col="5"] .ns-postlist__item{
    flex: 0 0 calc((100% - 16px * 4) / 5);
  }
}

/* -------------------------------------------------------------------------------------
 * 10-5. SP（599px以下）: SP列数によるカード幅
 *       1: ほぼ1記事 / 2: 1.6記事 / 3: 2.2記事
 * ------------------------------------------------------------------------------------- */
@media (max-width: 599px){
  .ns-postlist__list{
    /* 左端ヘッダーと整列（margin負値・paddingでのフルブリードはやめる） */
    gap: 12px;
    padding: 4px 0 14px;
    margin: 0;
  }
  .ns-postlist__item{
    flex: 0 0 calc(60% - 6px);
    scroll-snap-align: start;
    min-width: 0;
  }
  .ns-postlist[data-sp-col="1"] .ns-postlist__item{
    flex: 0 0 calc(85% - 6px);
  }
  .ns-postlist[data-sp-col="2"] .ns-postlist__item{
    flex: 0 0 calc(60% - 6px);
  }
  .ns-postlist[data-sp-col="3"] .ns-postlist__item{
    flex: 0 0 calc(45% - 6px);
  }
}

/* -------------------------------------------------------------------------------------
 * 10-6. li / link
 * ------------------------------------------------------------------------------------- */
.ns-postlist__item{
  margin: 0;
  padding: 0;
  list-style: none;
}

.ns-postlist__link,
a.ns-postlist__link{
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  background: #ffffff !important;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  color: #1a1a1a !important;
  transition:
    transform .25s cubic-bezier(.2, .8, .2, 1),
    box-shadow .25s ease,
    border-color .2s ease;
}
.ns-postlist__link::before,
.ns-postlist__link::after{
  content: none !important;
  display: none !important;
}
.ns-postlist__link:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
  border-color: #e2e6ec;
}

/* -------------------------------------------------------------------------------------
 * 10-7. thumb / cat-badge / img
 * ------------------------------------------------------------------------------------- */
.ns-postlist__thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f4f6f9;
}

/* カテゴリーバッジ — data-cat-id ベースで自動色（functions.php §16） */
.ns-postlist__cat{
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 16px);
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--cat-color, #1a1a1a);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--cat-color, #d0d4db);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  z-index: 2;
}

.ns-postlist__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ns-postlist__img-placeholder{
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(135deg, #e8edf4 0%, #f4f6f9 100%);
  position: relative;
}
.ns-postlist__img-placeholder::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c9d3e1 0%, #b6c2d3 100%);
  opacity: .5;
}
.ns-postlist__link:hover .ns-postlist__img{
  transform: scale(1.06);
}

/* -------------------------------------------------------------------------------------
 * 10-8. body / title / date
 *       PC/SP共に title 2行省略でタイトル全文ほぼ視認可能。
 *       SWELL の h3 デフォルト装飾（::before/::after の罫線等）を完全リセット。
 *       date の上下余白は最小化。
 * ------------------------------------------------------------------------------------- */
.ns-postlist__body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 11px 13px 12px;
  min-width: 0;
  gap: 4px;
}
@media (max-width: 599px){
  .ns-postlist__body{
    padding: 10px 12px 11px;
    gap: 4px;
  }
}

/* 記事カードのタイトル — span に変更済（h3 タグ巻き添え回避）。
   それでも .entry-content や .entry-content 配下で多重に specificity が当たる
   可能性に備え、視覚プロパティは !important を明示。 */
.ns-postlist__title{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: clamp(13px, 0.5vw + 0.65rem, 14.5px) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.005em !important;
  color: #1a1a1a !important;
  font-feature-settings: "palt" 1;
  transition: color .2s ease;
  /* PC/SP共通: 2行省略 */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal !important;
  word-break: break-all;
  line-break: strict;
  /* 1行記事と2行記事のカード高さ統一 */
  min-height: calc(1em * 1.5 * 2);
}
/* SWELL h3/h2 デフォルト装飾（::before/::after 罫線、AI感の正体）を完全リセット */
.ns-postlist__title::before,
.ns-postlist__title::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 599px){
  .ns-postlist__title{
    font-size: 13px !important;
    line-height: 1.5 !important;
    min-height: calc(13px * 1.5 * 2);
  }
}
.ns-postlist__link:hover .ns-postlist__title{
  color: #ea4341;
}

.ns-postlist__date{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1;
  line-height: 1.2 !important;
  background: none !important;
}

/* -------------------------------------------------------------------------------------
 * 10-9. スクロール・フェード + 進捗バー（v3）
 *       JS（functions.php §18）が viewport の data-scroll-pos を更新:
 *         - "none"   : スクロール不要（フェード非表示）
 *         - "start"  : 左端（右フェードのみ）
 *         - "middle" : 途中（左右フェード両方）
 *         - "end"    : 右端（左フェードのみ）
 *
 *       右端 = ::after / 左端 = ::before
 *       下に細い進捗バー（カテゴリー色）を JS なしで実装 — overflow と scrollbar のカスタマイズ
 * ------------------------------------------------------------------------------------- */

/* viewport — fade と progress バーのための位置基準 */
.ns-postlist__viewport{
  position: relative;
  margin: 0;
  padding: 0;
}

/* 右フェード */
.ns-postlist__viewport::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 20px;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 70%,
    rgba(255, 255, 255, 1)    100%
  );
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease;
}

/* 左フェード */
.ns-postlist__viewport::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 20px;
  width: 48px;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 70%,
    rgba(255, 255, 255, 1)    100%
  );
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease;
}

/* JS による状態反映 */
.ns-postlist__viewport[data-scroll-pos="start"]::after  { opacity: 0.85; }
.ns-postlist__viewport[data-scroll-pos="middle"]::before{ opacity: 0.7;  }
.ns-postlist__viewport[data-scroll-pos="middle"]::after { opacity: 0.85; }
.ns-postlist__viewport[data-scroll-pos="end"]::before   { opacity: 0.7;  }
.ns-postlist__viewport[data-scroll-pos="none"]::before,
.ns-postlist__viewport[data-scroll-pos="none"]::after   { opacity: 0;    }

/* JS未実行時のフォールバック（4列以上では右フェードを薄く出す） */
.ns-postlist__viewport:not([data-scroll-pos])::after{
  opacity: 0;
}
@media (min-width: 600px){
  .ns-postlist[data-pc-col="4"] .ns-postlist__viewport:not([data-scroll-pos])::after,
  .ns-postlist[data-pc-col="5"] .ns-postlist__viewport:not([data-scroll-pos])::after{
    opacity: 0.55;
  }
}
@media (max-width: 599px){
  .ns-postlist__viewport::before,
  .ns-postlist__viewport::after{
    bottom: 18px;
    width: 36px;
  }
  .ns-postlist__viewport:not([data-scroll-pos])::after{
    opacity: 0.7;
  }
}

/* -------------------------------------------------------------------------------------
 * 10-9b. プログレス連動スクロールバー（v3.1 / オシャレUI）
 *
 *   構成:
 *     .ns-postlist__progress
 *       .ns-postlist__progress-track  ← 細いグレーレール（背景）
 *       .ns-postlist__progress-thumb  ← カテゴリー色のサム（位置・幅は JS が更新）
 *
 *   挙動:
 *     - サムの幅 = clientWidth/scrollWidth × 100%（表示範囲の比率）
 *     - サムの left = scrollLeft/(scrollWidth-clientWidth) × (100% - thumbWidth)
 *     - スクロール不要 (data-scroll-pos="none") のときは thumb 幅 0% で消滅
 *     - JS未動作（data-scroll-pos 未設定）のときも非表示（事故防止）
 *
 *   デザイン:
 *     - トラック: 4px 高、フル幅、淡いグレー、丸端
 *     - サム: カテゴリー色（accent対応）、丸端、上品な glow
 *     - hover で微妙に厚みアップ
 * ------------------------------------------------------------------------------------- */
.ns-postlist__progress{
  position: relative;
  display: none;          /* 既定で非表示。JS が data-scroll-pos を付与したら出現 */
  height: 4px;
  margin: 10px 0 4px;
  border-radius: 999px;
  pointer-events: none;
  isolation: isolate;
}

/* スクロール可能なときだけ表示 */
.ns-postlist__viewport[data-scroll-pos="start"]  .ns-postlist__progress,
.ns-postlist__viewport[data-scroll-pos="middle"] .ns-postlist__progress,
.ns-postlist__viewport[data-scroll-pos="end"]    .ns-postlist__progress{
  display: block;
}

.ns-postlist__progress-track{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.07);
  border-radius: 999px;
}

.ns-postlist__progress-thumb{
  position: absolute;
  top: -1px; bottom: -1px;
  left: 0;
  width: 0%;
  background: var(--cat-color, #ea4341);
  border-radius: 999px;
  opacity: 0.92;
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--cat-color, #ea4341) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    left .22s cubic-bezier(.2, .8, .2, 1),
    width .35s cubic-bezier(.2, .8, .2, 1),
    opacity .2s ease;
}

/* viewport 全体ホバーで progress thumb がやや厚く・濃く */
.ns-postlist:hover .ns-postlist__progress-thumb{
  opacity: 1;
}

@media (max-width: 599px){
  .ns-postlist__progress{
    height: 3px;
    margin: 8px 0 2px;
  }
  .ns-postlist__progress-thumb{
    top: 0; bottom: 0;
  }
}

/* -------------------------------------------------------------------------------------
 * 10-10. SWELL .alignfull > * { margin-bottom: 2em } 抑制（NEW）
 *        .alignfull / .wp-block-group / .swell-block-fullWide__inner の直下 .ns-postlist
 *        には自動2em余白が当たるため、自前 margin で制御するためにリセット。
 *        カテゴリーが縦に並ぶときの余分な空白の主因。
 * ------------------------------------------------------------------------------------- */
.alignfull > .wp-block-cover__inner-container > .ns-postlist,
.alignfull > .wp-block-group__inner-container > .ns-postlist,
.swell-block-fullWide__inner > .ns-postlist,
.alignfull > .ns-postlist,
.wp-block-group > .ns-postlist,
.entry-content > .ns-postlist,
.entry-content > .ns-postlist{
  margin-bottom: 32px;
}
@media (max-width: 599px){
  .alignfull > .wp-block-cover__inner-container > .ns-postlist,
  .alignfull > .wp-block-group__inner-container > .ns-postlist,
  .swell-block-fullWide__inner > .ns-postlist,
  .alignfull > .ns-postlist,
  .wp-block-group > .ns-postlist,
  .entry-content > .ns-postlist,
  .entry-content > .ns-postlist{
    /* SP: 0px（間延び解消）。後で余白追加時は 2〜3px 程度。 */
    margin-bottom: 0;
  }
}

/* -------------------------------------------------------------------------------------
 * 10-11. 旧下部もっと見るボタン（互換: more_text 明示時のみ表示）
 *        通常はヘッダー右側のCTAに統合されるため、ここは明示指定時の控えめ表示。
 * ------------------------------------------------------------------------------------- */
.ns-postlist__more{
  margin: 8px 0 0;
  padding: 0;
  text-align: right;
}
@media (max-width: 599px){
  .ns-postlist__more{
    text-align: center;
    margin-top: 8px;
  }
}

.ns-postlist__more-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-decoration: none !important;
  background: transparent;
  border: 1px solid #d0d4db;
  border-radius: 6px;
  transition:
    border-color .15s ease,
    color .15s ease,
    background .15s ease;
}
.ns-postlist__more-link::before,
.ns-postlist__more-link::after{
  content: none !important;
  display: none !important;
}
.ns-postlist__more-arrow{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.ns-postlist__more-link:hover{
  border-color: #ea4341;
  color: #ea4341;
}
.ns-postlist__more-link:hover .ns-postlist__more-arrow{
  transform: rotate(-45deg) translate(2px, 2px);
}

/* -------------------------------------------------------------------------------------
 * 10-12. アクセシビリティ（focus + reduced-motion）
 * ------------------------------------------------------------------------------------- */
.ns-postlist__heading:focus-visible,
.ns-postlist__link:focus-visible{
  outline: 2px solid var(--cat-color, #ea4341);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce){
  .ns-postlist__heading,
  .ns-postlist__heading-title,
  .ns-postlist__heading-cta,
  .ns-postlist__heading-cta-arrow,
  .ns-postlist__heading-cta-text::after,
  .ns-postlist__heading-divider,
  .ns-postlist__heading-deco,
  .ns-postlist__heading-deco-dot,
  .ns-postlist__link,
  .ns-postlist__img,
  .ns-postlist__title,
  .ns-postlist__more-link,
  .ns-postlist__more-arrow,
  .ns-postlist__viewport::before,
  .ns-postlist__viewport::after{
    transition: none !important;
    animation: none !important;
  }
  /* reveal アニメは JS が即時 data-revealed=true を付けるため不要 */
  .ns-postlist__heading-deco,
  .ns-postlist__heading-title,
  .ns-postlist__heading-divider,
  .ns-postlist__heading-cta{
    opacity: 1 !important;
    transform: none !important;
  }
  .ns-postlist__link:hover{
    transform: none !important;
  }
  .ns-postlist__link:hover .ns-postlist__img{
    transform: none !important;
  }
}


/* =====================================================================================
 * 11. [ns_blog_cta] ショートコード — ブログ一覧への大型CTA
 *    （対応するPHP実装は functions.php §19）
 *
 *    HTML構造:
 *      <div class="ns-blog-cta ns-blog-cta--size-default" style="--ns-cta-accent:#xxxxxx">
 *        <a class="ns-blog-cta__btn" href="...">
 *          <span class="ns-blog-cta__bg"></span>      ← 流動するグラデ背景
 *          <span class="ns-blog-cta__shine"></span>   ← ホバー時に走る光
 *          <span class="ns-blog-cta__ripple"></span>  ← クリック時の波紋
 *          <span class="ns-blog-cta__inner">
 *            <span class="ns-blog-cta__text">...</span>
 *            <span class="ns-blog-cta__arrow">
 *              <span class="ns-blog-cta__arrow-line"></span>
 *              <span class="ns-blog-cta__arrow-head"></span>
 *            </span>
 *          </span>
 *        </a>
 *        <p class="ns-blog-cta__sub">...</p>
 *      </div>
 *
 *    デザインコンセプト:
 *      - ノーサイド赤（--ns-cta-accent）の大型ピル型ボタン
 *      - 背景に流動する複層グラデ（CSS animation で常時ゆっくり動く）
 *      - ホバー時: 光が左→右に走る + 矢印が右に伸びる + ボタンが微小に持ち上がる
 *      - サブテキストは左右に細い装飾線を伴う「副題」スタイル
 *      - 上下のセクション余白は控えめ
 *
 *    11-1. 外枠
 *    11-2. ボタン本体（背景・光・波紋）
 *    11-3. インナー（テキスト + 矢印）
 *    11-4. サブテキスト
 *    11-5. インタラクション
 *    11-6. アクセシビリティ
 * ===================================================================================== */

/* -------------------------------------------------------------------------------------
 * 11-1. 外枠（上下paddingは控えめ）
 * ------------------------------------------------------------------------------------- */
.ns-blog-cta{
  --ns-cta-accent: #ea4341;
  --ns-cta-accent-d: color-mix(in srgb, var(--ns-cta-accent) 75%, #000);
  --ns-cta-accent-l: color-mix(in srgb, var(--ns-cta-accent) 88%, #fff);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  padding: 8px 0;
  text-align: center;
  font-feature-settings: "palt" 1;
}
.ns-blog-cta--size-compact{
  margin: 16px 0;
  padding: 4px 0;
  gap: 12px;
}
@media (max-width: 599px){
  .ns-blog-cta{
    margin: 20px 0;
    gap: 12px;
  }
  .ns-blog-cta--size-compact{
    margin: 14px 0;
    gap: 10px;
  }
}

/* -------------------------------------------------------------------------------------
 * 11-2. ボタン本体（背景レイヤー: bg / shine / ripple は重ね順を厳密管理）
 * ------------------------------------------------------------------------------------- */
.ns-blog-cta__btn,
a.ns-blog-cta__btn{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: clamp(280px, 38vw, 460px);
  max-width: 92vw;
  padding: 20px 48px;
  border-radius: 999px;
  text-decoration: none !important;
  color: #ffffff !important;
  background: var(--ns-cta-accent);
  box-shadow:
    0 14px 36px rgba(234, 67, 65, 0.28),
    0 4px 10px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  isolation: isolate;          /* z-index コンテキストを閉じる */
  transition:
    transform .35s cubic-bezier(.2, .8, .2, 1),
    box-shadow .35s ease;
  will-change: transform;
}
.ns-blog-cta--size-compact .ns-blog-cta__btn,
.ns-blog-cta--size-compact a.ns-blog-cta__btn{
  padding: 14px 36px;
  min-width: clamp(240px, 32vw, 380px);
}
@media (max-width: 599px){
  .ns-blog-cta__btn,
  a.ns-blog-cta__btn{
    padding: 16px 28px;
    min-width: 0;
    width: min(100%, 360px);
  }
  .ns-blog-cta--size-compact .ns-blog-cta__btn,
  .ns-blog-cta--size-compact a.ns-blog-cta__btn{
    padding: 13px 22px;
    width: min(100%, 320px);
  }
}
.ns-blog-cta__btn::before,
.ns-blog-cta__btn::after{
  content: none !important;
  display: none !important;
}

/* 流動するグラデ背景（常時ゆるくアニメ） */
.ns-blog-cta__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(120% 100% at 0% 50%,
      var(--ns-cta-accent-l) 0%,
      var(--ns-cta-accent)   38%,
      var(--ns-cta-accent-d) 78%,
      var(--ns-cta-accent)   100%
    );
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: nsCtaBgFlow 9s ease-in-out infinite alternate;
  opacity: 1;
}
@keyframes nsCtaBgFlow{
  0%   { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}

/* ホバー時に走る光（diagonal shine） */
.ns-blog-cta__shine{
  position: absolute;
  top: -50%;
  left: -120%;
  width: 65%;
  height: 200%;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.32) 45%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.32) 55%,
    rgba(255, 255, 255, 0)    100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
  transition: left .8s cubic-bezier(.2, .8, .2, 1);
}

/* クリック時の波紋（CSSのみで疑似的に hover で薄く現出） */
.ns-blog-cta__ripple{
  position: absolute;
  top: 50%; left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .55s ease;
}

/* -------------------------------------------------------------------------------------
 * 11-3. インナー（テキスト + 矢印）
 * ------------------------------------------------------------------------------------- */
.ns-blog-cta__inner{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #ffffff !important;
  font-size: clamp(15px, 0.6vw + 0.78rem, 17px);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.4;
  white-space: nowrap;
}
.ns-blog-cta--size-compact .ns-blog-cta__inner{
  font-size: clamp(14px, 0.4vw + 0.7rem, 15.5px);
  gap: 10px;
}
@media (max-width: 599px){
  .ns-blog-cta__inner{
    font-size: 14.5px;
    gap: 10px;
    letter-spacing: 0.03em;
  }
}

.ns-blog-cta__text{
  /* hover で右へ微小スライド */
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

/* 矢印（線+三角形を分離して、線が伸びるアニメ） */
.ns-blog-cta__arrow{
  position: relative;
  display: inline-block;
  width: 28px;
  height: 14px;
  flex-shrink: 0;
}
.ns-blog-cta__arrow-line{
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%) scaleX(1);
  transform-origin: right center;
  transition: width .35s cubic-bezier(.2, .8, .2, 1);
}
.ns-blog-cta__arrow-head{
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

/* -------------------------------------------------------------------------------------
 * 11-4. サブテキスト
 * ------------------------------------------------------------------------------------- */
.ns-blog-cta__sub{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #64748b !important;
  line-height: 1.5;
}
@media (max-width: 599px){
  .ns-blog-cta__sub{
    font-size: 11.5px;
    gap: 10px;
    letter-spacing: 0.04em;
    padding: 0 8px !important;
  }
}
.ns-blog-cta__sub-line{
  display: inline-block;
  width: clamp(20px, 4vw, 36px);
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
  transition: width .3s cubic-bezier(.2, .8, .2, 1);
}
.ns-blog-cta__sub-text{
  flex-shrink: 1;
  min-width: 0;
}

/* -------------------------------------------------------------------------------------
 * 11-5. インタラクション
 *       ・hover: 持ち上がり + shine 走り + ripple 拡大 + 矢印線伸長 + サブ装飾線伸長
 *       ・active: 凹むフィードバック
 *       ・focus-visible: アクセント色のリング
 * ------------------------------------------------------------------------------------- */
.ns-blog-cta__btn:hover{
  transform: translateY(-3px);
  box-shadow:
    0 22px 48px rgba(234, 67, 65, 0.36),
    0 6px 14px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.ns-blog-cta__btn:hover .ns-blog-cta__shine{
  left: 120%;
}
.ns-blog-cta__btn:hover .ns-blog-cta__ripple{
  transform: translate(-50%, -50%) scale(40);
  opacity: 0;
}
.ns-blog-cta__btn:hover .ns-blog-cta__text{
  transform: translateX(-2px);
}
.ns-blog-cta__btn:hover .ns-blog-cta__arrow-line{
  width: 22px;
}
.ns-blog-cta__btn:hover .ns-blog-cta__arrow-head{
  transform: translateY(-50%) rotate(45deg) translate(2px, -2px);
}
.ns-blog-cta:hover .ns-blog-cta__sub-line{
  width: clamp(28px, 5.5vw, 48px);
  opacity: 0.6;
}
.ns-blog-cta__btn:active{
  transform: translateY(-1px);
  transition: transform .1s ease;
}

/* -------------------------------------------------------------------------------------
 * 11-6. アクセシビリティ（focus + reduced-motion）
 * ------------------------------------------------------------------------------------- */
.ns-blog-cta__btn:focus-visible{
  outline: 3px solid var(--ns-cta-accent);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce){
  .ns-blog-cta__bg{ animation: none !important; }
  .ns-blog-cta__btn,
  .ns-blog-cta__shine,
  .ns-blog-cta__ripple,
  .ns-blog-cta__text,
  .ns-blog-cta__arrow-line,
  .ns-blog-cta__arrow-head,
  .ns-blog-cta__sub-line{
    transition: none !important;
  }
  .ns-blog-cta__btn:hover{
    transform: none !important;
  }
  .ns-blog-cta__btn:hover .ns-blog-cta__shine{ left: -120%; }
  .ns-blog-cta__btn:hover .ns-blog-cta__ripple{ opacity: 0; transform: translate(-50%, -50%) scale(1); }
  .ns-blog-cta__btn:hover .ns-blog-cta__text{ transform: none !important; }
}


/* =====================================================================================
 * 12. [ns_blog_search] ライブサジェスト型 全文検索窓
 *
 *   - 大型・上質な検索フィールド + プレミアムなドロップダウン
 *   - 0件時の控えめな相談導線（押し売り感ゼロ）
 *   - 中立タグ（div / span / a）構成（A-9 教訓準拠）
 *   - prefers-reduced-motion 対応
 * ===================================================================================== */

/* ---------- ラッパー ---------- */
.ns-blog-search{
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 28px auto 40px;
  padding: 0;
  isolation: isolate;
  font-family: inherit;
  z-index: 5;
}

.ns-blog-search--compact{
  max-width: 540px;
  margin: 16px auto 24px;
}

/* インデックスJSONは画面に出さない */
.ns-blog-search__index{
  display: none !important;
}

/* ---------- イントロ ---------- */
.ns-blog-search__intro{
  margin: 0 0 14px;
  text-align: center;
  font-size: clamp(13px, 0.4vw + 0.7rem, 14.5px);
  color: #475569;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* ---------- 検索フィールド（強化版：背景グラデ + 多層shadow + 常時アクセント） ---------- */
.ns-blog-search__field{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 16px rgba(15, 23, 42, 0.05),
    0 18px 36px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.22s ease, box-shadow 0.26s ease, transform 0.22s ease, background 0.26s ease;
  z-index: 2;
}

/* 検索窓の左端に常時カテゴリー赤の縦アクセント（細） */
.ns-blog-search__field::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, #ea4341 30%, #ea4341 70%, transparent 100%);
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.ns-blog-search__field:hover{
  border-color: color-mix(in srgb, #ea4341 35%, #cbd5e1);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 10px 24px rgba(15, 23, 42, 0.08),
    0 22px 44px rgba(234, 67, 65, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

.ns-blog-search__field:focus-within{
  border-color: #ea4341;
  background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  box-shadow:
    0 0 0 5px rgba(234, 67, 65, 0.10),
    0 0 0 1px rgba(234, 67, 65, 0.20),
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 18px 44px rgba(234, 67, 65, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}
.ns-blog-search__field:focus-within::before{
  opacity: 1;
}

/* 虫眼鏡アイコン（常時アクセント色寄り） */
.ns-blog-search__icon{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: color-mix(in srgb, #ea4341 65%, #94a3b8);
  transition: color 0.22s ease, transform 0.22s ease;
}
.ns-blog-search__icon svg{ width: 100%; height: 100%; }

.ns-blog-search__field:hover .ns-blog-search__icon{
  color: #ea4341;
  transform: scale(1.04);
}
.ns-blog-search__field:focus-within .ns-blog-search__icon{
  color: #ea4341;
  transform: scale(1.08);
}

/* 入力欄 */
.ns-blog-search__input{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 4px 0;
  background: transparent;
  border: 0;
  outline: none;
  font-size: clamp(15px, 0.4vw + 0.85rem, 17px);
  color: #0f172a;
  font-weight: 500;
  letter-spacing: 0.005em;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.ns-blog-search__input::-webkit-search-decoration,
.ns-blog-search__input::-webkit-search-cancel-button,
.ns-blog-search__input::-webkit-search-results-button,
.ns-blog-search__input::-webkit-search-results-decoration{
  -webkit-appearance: none;
  display: none;
}

.ns-blog-search__input::placeholder{
  color: #94a3b8;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color 0.22s ease, transform 0.22s ease;
}
.ns-blog-search__field:focus-within .ns-blog-search__input::placeholder{
  color: #cbd5e1;
}

/* スピナー（入力中だけ表示） */
.ns-blog-search__spinner{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 24px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.ns-blog-search__spinner.is-active{ opacity: 1; }
.ns-blog-search__spinner-dot{
  width: 4px;
  height: 4px;
  background: #ea4341;
  border-radius: 50%;
  animation: ns-blog-search-pulse 1.05s ease-in-out infinite;
}
.ns-blog-search__spinner-dot:nth-child(2){ animation-delay: 0.16s; }
.ns-blog-search__spinner-dot:nth-child(3){ animation-delay: 0.32s; }

@keyframes ns-blog-search-pulse{
  0%, 80%, 100%{ transform: scale(0.55); opacity: 0.4; }
  40%{ transform: scale(1.0); opacity: 1; }
}

/* クリアボタン */
.ns-blog-search__clear{
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  background: #f1f5f9;
  border: 0;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.22s ease;
}
.ns-blog-search__clear.is-visible{ display: inline-flex; }
.ns-blog-search__clear svg{ width: 14px; height: 14px; }
.ns-blog-search__clear:hover{
  background: #ea4341;
  color: #ffffff;
  transform: rotate(90deg);
}
.ns-blog-search__clear:focus-visible{
  outline: 2px solid #ea4341;
  outline-offset: 2px;
}

/* ---------- ドロップダウン ---------- */
.ns-blog-search__dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: min(540px, 80vh);
  overflow: hidden auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 24px 56px rgba(15, 23, 42, 0.16);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  animation: ns-blog-search-reveal 0.22s ease both;
}

.ns-blog-search__dropdown[hidden]{ display: none; }

@keyframes ns-blog-search-reveal{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: translateY(0); }
}

.ns-blog-search__dropdown::-webkit-scrollbar{ width: 6px; }
.ns-blog-search__dropdown::-webkit-scrollbar-thumb{
  background: #cbd5e1;
  border-radius: 999px;
}

.ns-blog-search__results{
  list-style: none !important;
  margin: 0 !important;
  padding: 8px !important;
}

/* 1件 = 1リンク */
.ns-blog-search__result{
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr 18px;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.ns-blog-search__result + .ns-blog-search__result{
  margin-top: 2px !important;
}

.ns-blog-search__result.is-active,
.ns-blog-search__result:hover{
  background: #f8fafc;
}

.ns-blog-search__result.is-active .ns-blog-search__arrow,
.ns-blog-search__result:hover .ns-blog-search__arrow{
  transform: translateX(3px);
  color: #ea4341;
}

.ns-blog-search__result.is-active .ns-blog-search__title,
.ns-blog-search__result:hover .ns-blog-search__title{
  color: #ea4341;
}

/* サムネ */
.ns-blog-search__thumb{
  display: block;
  width: 84px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  flex: 0 0 auto;
}
.ns-blog-search__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.32s ease;
}
.ns-blog-search__result.is-active .ns-blog-search__thumb img,
.ns-blog-search__result:hover .ns-blog-search__thumb img{
  transform: scale(1.06);
}
.ns-blog-search__thumb--placeholder{
  background-image:
    linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%),
    radial-gradient(circle at 30% 30%, rgba(234,67,65,0.08), transparent 60%);
}

/* 本文 */
.ns-blog-search__body{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ns-blog-search__meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ns-blog-search__cat{
  display: inline-block;
  padding: 2px 8px;
  background: var(--cat-color, #ea4341);
  color: var(--cat-text, #fff);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
}
.ns-blog-search__date{
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ns-blog-search__title{
  font-size: clamp(13.5px, 0.3vw + 0.75rem, 15px);
  font-weight: 700;
  line-height: 1.45;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s ease;
}

.ns-blog-search__mark{
  background: linear-gradient(transparent 60%, rgba(234, 67, 65, 0.22) 60%);
  color: inherit;
  padding: 0 1px;
  font-weight: 800;
  border-radius: 0;
}

/* 矢印 */
.ns-blog-search__arrow{
  flex: 0 0 auto;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #cbd5e1;
  border-bottom: 2px solid #cbd5e1;
  transform: rotate(-45deg);
  transition: transform 0.22s ease, border-color 0.22s ease, color 0.22s ease;
  margin-right: 4px;
  color: #cbd5e1;
}

/* ---------- 0件表示 ---------- */
.ns-blog-search__empty{
  list-style: none !important;
  padding: 24px 22px 22px !important;
  margin: 0 !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ns-blog-search__empty-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  color: #cbd5e1;
}
.ns-blog-search__empty-icon svg{ width: 100%; height: 100%; }
.ns-blog-search__empty-text{
  margin: 0 !important;
  font-size: 14.5px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.ns-blog-search__empty-sub{
  margin: 0 !important;
  font-size: 13px;
  color: #64748b;
  line-height: 1.65;
}
.ns-blog-search__empty-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.ns-blog-search__empty-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: #ea4341;
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 4px 12px rgba(234, 67, 65, 0.22);
}
.ns-blog-search__empty-cta:hover{
  background: #d23a38;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(234, 67, 65, 0.32);
}
.ns-blog-search__empty-cta:hover .ns-blog-search__empty-cta-arrow{
  transform: translateX(3px);
}
.ns-blog-search__empty-cta-arrow{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  transition: transform 0.22s ease;
}

.ns-blog-search__empty-dismiss{
  padding: 10px 18px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ns-blog-search__empty-dismiss:hover{
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}
.ns-blog-search__empty-dismiss:focus-visible{
  outline: 2px solid #ea4341;
  outline-offset: 2px;
}

/* ---------- SP 調整 ---------- */
@media (max-width: 599px){
  .ns-blog-search{ margin: 20px auto 28px; }
  .ns-blog-search__field{
    padding: 12px 14px;
    border-radius: 14px;
    gap: 8px;
  }
  .ns-blog-search__input{
    font-size: 16px; /* iOS ズーム抑制 */
  }
  .ns-blog-search__icon{ width: 20px; height: 20px; }
  .ns-blog-search__dropdown{
    border-radius: 14px;
    max-height: 70vh;
  }
  .ns-blog-search__result{
    grid-template-columns: 64px 1fr 14px;
    gap: 10px;
    padding: 8px 10px !important;
  }
  .ns-blog-search__thumb{ width: 64px; }
  .ns-blog-search__title{
    font-size: 13.5px;
    line-height: 1.4;
  }
  .ns-blog-search__cat{ font-size: 10px; }
  .ns-blog-search__empty{ padding: 20px 16px !important; }
  .ns-blog-search__empty-actions{ flex-direction: column; gap: 8px; width: 100%; }
  .ns-blog-search__empty-cta,
  .ns-blog-search__empty-dismiss{ width: 100%; justify-content: center; }
}

/* ---------- 検索窓 上ヘッドライン（検索窓を「指す」説明枠 / A-15 リライト） ----------
   - CTA見えしない矩形（角丸控えめ）
   - 検索窓と密着（margin-bottom: 6 + 検索窓の margin-top 上書き）
   - 控えめな赤ベース（透明感のあるグラデ）
   - 右端のアイコンは「下矢印」が上下にバウンス → 視覚的に検索窓を指す */
.ns-blog-search-headline{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin: 24px auto 6px;
  padding: 10px 18px 10px 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ea4341 9%, #ffffff) 0%,
    color-mix(in srgb, #ea4341 5%, #ffffff) 100%
  );
  color: #c52d2b;
  border: 1px solid color-mix(in srgb, #ea4341 22%, #f1f5f9);
  border-radius: 12px;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(234, 67, 65, 0.06);
}

/* headline 直後の検索窓は密着させる（説明枠 → 検索窓の流れ） */
.ns-blog-search-headline + .ns-blog-search{
  margin-top: 0;
}

.ns-blog-search-headline__text{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}
.ns-blog-search-headline__title{
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #c52d2b;
}
.ns-blog-search-headline__sub{
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in srgb, #c52d2b 78%, #475569);
  letter-spacing: 0.04em;
}

/* 下矢印アイコン — 上下にバウンスして検索窓を指す */
.ns-blog-search-headline__icon{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #ea4341;
  animation: ns-blog-search-headline-bounce 1.6s ease-in-out infinite;
}
.ns-blog-search-headline__icon svg{ width: 100%; height: 100%; }

@keyframes ns-blog-search-headline-bounce{
  0%, 100% { transform: translateY(0);   opacity: 0.65; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 599px){
  .ns-blog-search-headline{
    max-width: calc(100% - 24px);
    margin: 12px auto 4px;
    padding: 9px 14px;
    gap: 10px;
    border-radius: 10px;
  }
  .ns-blog-search-headline__title{ font-size: 12.5px; }
  .ns-blog-search-headline__sub{ font-size: 10px; }
  .ns-blog-search-headline__icon{ width: 20px; height: 20px; }
}

/* ---------- 検索窓ドロップダウン下: 「全て見る」リンク ---------- */
.ns-blog-search__footer{
  border-top: 1px solid #f1f5f9;
  padding: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.ns-blog-search__see-all{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: transparent;
  border-radius: 10px;
  color: #1e293b !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease, transform 0.22s ease;
}
.ns-blog-search__see-all:hover{
  background: linear-gradient(135deg, color-mix(in srgb, #ea4341 8%, #ffffff), color-mix(in srgb, #ea4341 4%, #ffffff));
  color: #ea4341 !important;
  transform: translateX(2px);
}
.ns-blog-search__see-all:focus-visible{
  outline: 2px solid #ea4341;
  outline-offset: 2px;
}
.ns-blog-search__see-all-text{
  display: inline-flex;
  align-items: center;
}
.ns-blog-search__see-all-keyword{
  font-weight: 800;
  color: #ea4341;
  margin: 0 2px;
}
.ns-blog-search__see-all-arrow{
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.22s ease;
  margin-bottom: 1px;
}
.ns-blog-search__see-all:hover .ns-blog-search__see-all-arrow{
  transform: rotate(-45deg) translate(2px, -2px);
}
@media (max-width: 599px){
  .ns-blog-search__see-all{ font-size: 12.5px; padding: 10px 12px; }
}

/* ---------- 検索窓 bare スタイル（SP 開閉メニュー最上部用 / [ns_blog_search_bare]）
   - max-width 解除、margin 0、shadow 控えめ、上下 padding 圧縮 ---------- */
.ns-blog-search--bare{
  max-width: none;
  margin: 0;
}
.ns-blog-search--bare .ns-blog-search__intro{ display: none; }
.ns-blog-search--bare .ns-blog-search__field{
  padding: 10px 14px;
  border-radius: 10px;
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transform: none !important;
}
.ns-blog-search--bare .ns-blog-search__field::before{ display: none; }
.ns-blog-search--bare .ns-blog-search__field:hover{
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.ns-blog-search--bare .ns-blog-search__field:focus-within{
  border-color: #ea4341;
  box-shadow:
    0 0 0 3px rgba(234, 67, 65, 0.10),
    0 4px 10px rgba(234, 67, 65, 0.10);
}
.ns-blog-search--bare .ns-blog-search__icon{ width: 18px; height: 18px; }
.ns-blog-search--bare .ns-blog-search__input{ font-size: 14px; }
@media (max-width: 599px){
  .ns-blog-search--bare .ns-blog-search__input{ font-size: 16px; } /* iOS ズーム抑制 */
}
.ns-blog-search--bare .ns-blog-search__dropdown{
  border-radius: 10px;
  margin-top: 4px;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ns-blog-search__dropdown,
  .ns-blog-search__field,
  .ns-blog-search__icon,
  .ns-blog-search__clear,
  .ns-blog-search__result,
  .ns-blog-search__thumb img,
  .ns-blog-search__title,
  .ns-blog-search__arrow,
  .ns-blog-search__empty-cta,
  .ns-blog-search__empty-cta-arrow,
  .ns-blog-search__see-all,
  .ns-blog-search__see-all-arrow,
  .ns-blog-search-headline,
  .ns-blog-search-headline__icon{
    transition: none !important;
    animation: none !important;
  }
  .ns-blog-search__spinner-dot,
  .ns-blog-search-headline__pulse,
  .ns-blog-search-headline::before{ animation: none !important; opacity: 0.6; }
}


/* =====================================================================================
 * 13. /blog アーカイブハブ + /category/{slug}/ アーカイブ強化
 *
 *   - .ns-blog-archive   : /blog の全体ラッパー
 *   - .ns-cat-archive    : /category/{slug}/ の全体ラッパー（旧 .ns-cat-archive-* を吸収）
 *   - .ns-blog-card      : 縦グリッド用カード（中立タグ構成）
 *   - 3ドット浮遊・shimmer 等の語彙はトップページの [ns_post_list] と統一
 *   - 中立タグ前提（A-9 教訓）
 * ===================================================================================== */

/* ---------- /blog ハブ ---------- */
.ns-blog-archive{
  --ns-archive-max: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.ns-blog-archive__intro{
  max-width: 780px;
  margin: 32px auto 18px;
  padding: 0 16px;
  text-align: center;
}

.ns-blog-archive__eyebrow{
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #ea4341;
  letter-spacing: 0.18em;
}

.ns-blog-archive__title{
  display: block;
  font-size: clamp(20px, 1.6vw + 0.6rem, 32px);
  font-weight: 800;
  line-height: 1.4;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  word-break: keep-all;          /* 単語途中での改行を防ぐ */
  overflow-wrap: anywhere;       /* それでも溢れる場合のみ折り返し */
}

@media (max-width: 599px){
  .ns-blog-archive__title{
    font-size: clamp(17px, 5.2vw, 22px);
    line-height: 1.4;
    letter-spacing: 0;
    margin-bottom: 12px;
  }
}

.ns-blog-archive__lead{
  margin: 0;
  font-size: clamp(13.5px, 0.3vw + 0.7rem, 15px);
  line-height: 1.85;
  color: #475569;
  letter-spacing: 0.005em;
}

/* 改行制御ユーティリティ（<br class="pc-only"> / <br class="sp-only"> を使用）
   display: revert で各タグ本来のデフォルト display 値に戻す */
.pc-only{ display: revert; }
.sp-only{ display: none !important; }
@media (max-width: 599px){
  .pc-only{ display: none !important; }
  .sp-only{ display: revert; }
}

/* 5本セクションの間隔 */
.ns-blog-archive__sections{
  margin: 36px auto 24px;
  padding: 0 16px;
  max-width: var(--ns-archive-max);
}

.ns-blog-archive__cta{
  margin: 24px auto 48px;
  padding: 0 16px;
  max-width: 920px;
}


/* ---------- /category/{slug}/ ---------- */
.ns-cat-archive{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* 戻るリンク（再設計） */
.ns-cat-archive__back{
  margin: 0 0 18px;
}
.ns-cat-archive__back-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #475569 !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.ns-cat-archive__back-link:hover{
  background: #f8fafc;
  color: #0f172a !important;
  border-color: #cbd5e1;
  transform: translateX(-2px);
}
.ns-cat-archive__back-arrow{
  display: inline-block;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.ns-cat-archive__back-link:hover .ns-cat-archive__back-arrow{
  transform: rotate(45deg) translate(-1px, 1px);
}

/* カテゴリーヘッダー（リッチ） */
.ns-cat-archive__header{
  position: relative;
  display: flex;
  align-items: center;             /* PC で deco と title の位置を揃える */
  gap: 18px;
  margin: 0 0 32px;
  padding: 28px 24px 26px;
  background:
    linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid #e8eef5;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
}

/* 背景の上端アクセント線（カテゴリー色、左→右にフェード） */
.ns-cat-archive__header::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--cat-color, #ea4341) 0%,
    var(--cat-color, #ea4341) 24%,
    transparent 100%
  );
  opacity: 0.85;
  z-index: 1;
}

/* 背景の薄いグロー */
.ns-cat-archive__header::after{
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cat-color, #ea4341) 12%, transparent) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* 3ドット浮遊（[ns_post_list] と語彙統一） */
.ns-cat-archive__header-deco{
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin-top: 0;     /* align-items: center 化したため不要 */
  z-index: 2;
}
.ns-cat-archive__header-deco span{
  position: absolute;
  border-radius: 50%;
  background: var(--cat-color, #ea4341);
  display: block;
}
.ns-cat-archive__header-deco span:nth-child(1){
  width: 15px; height: 15px;
  top: 13px; left: 5px;
  opacity: 1;
  animation: ns-cat-deco-float-1 4.6s ease-in-out infinite;
}
.ns-cat-archive__header-deco span:nth-child(2){
  width: 10px; height: 10px;
  top: 24px; left: 26px;
  opacity: 0.75;
  animation: ns-cat-deco-float-2 5.4s ease-in-out infinite;
}
.ns-cat-archive__header-deco span:nth-child(3){
  width: 8px; height: 8px;
  top: 6px; left: 30px;
  opacity: 0.9;
  animation: ns-cat-deco-float-3 4.9s ease-in-out infinite;
}
@keyframes ns-cat-deco-float-1{
  0%,100%{ transform: translate(0,0); }
  50%    { transform: translate(3px, -4px); }
}
@keyframes ns-cat-deco-float-2{
  0%,100%{ transform: translate(0,0); }
  50%    { transform: translate(-3px, 4px); }
}
@keyframes ns-cat-deco-float-3{
  0%,100%{ transform: translate(0,0); }
  50%    { transform: translate(4px, 3px); }
}

/* ヘッダー本体 */
.ns-cat-archive__header-body{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  z-index: 2;
}

/* パンくず（子カテゴリーのみ） */
.ns-cat-archive__header-crumb{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #64748b;
  letter-spacing: 0.02em;
}
.ns-cat-archive__header-crumb a{
  color: #475569 !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: color 0.2s ease;
}
.ns-cat-archive__header-crumb a:hover{
  color: var(--cat-color, #ea4341) !important;
}
.ns-cat-archive__header-crumb-sep{
  color: #cbd5e1;
  font-weight: 400;
}

/* タイトル — 本体は黒文字で常時表示 / shimmer は擬似要素で1回だけ重ねる
   （旧実装は本体に gradient + clip:text したため、アニメ完了後にテキストが透明化する事故が発生したのを修正） */
.ns-cat-archive__header-title{
  position: relative;
  display: inline-block;
  margin: 0 0 12px;
  font-size: clamp(22px, 1.6vw + 0.5rem, 32px);
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.ns-cat-archive__header-title::before{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    color-mix(in srgb, var(--cat-color, #ea4341) 75%, transparent) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  animation: ns-cat-title-shimmer 1.6s ease 0.35s 1 forwards;
}

@keyframes ns-cat-title-shimmer{
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* メタ情報 */
.ns-cat-archive__header-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ns-cat-archive__header-count{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--cat-color, #ea4341) 10%, #ffffff);
  color: var(--cat-color, #ea4341);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  white-space: nowrap;
}

.ns-cat-archive__header-desc{
  margin: 0;
  font-size: clamp(13px, 0.2vw + 0.7rem, 14px);
  line-height: 1.75;
  color: #475569;
  letter-spacing: 0.005em;
}

/* ---------- 縦グリッド（.ns-blog-card） ---------- */
.ns-cat-archive__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0 0 36px;
}

@media (max-width: 1023px){
  .ns-cat-archive__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 599px){
  .ns-cat-archive__grid{
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.ns-blog-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
  min-width: 0;
}

.ns-blog-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cat-color, #ea4341);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.36s ease;
  z-index: 3;
}

.ns-blog-card:hover{
  border-color: color-mix(in srgb, var(--cat-color, #ea4341) 40%, #cbd5e1);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px rgba(15, 23, 42, 0.10);
  transform: translateY(-3px);
}
.ns-blog-card:hover::before{ transform: scaleX(1); }

.ns-blog-card__thumb{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}
.ns-blog-card__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ns-blog-card:hover .ns-blog-card__thumb img{
  transform: scale(1.06);
}

/* カテゴリーバッジ（サムネ左上） */
.ns-blog-card__cat{
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  padding: 4px 10px;
  background: var(--cat-color, #ea4341);
  color: var(--cat-text, #fff);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
  z-index: 2;
}

.ns-blog-card__body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  flex: 1;
  min-width: 0;
}

.ns-blog-card__title{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(14px, 0.3vw + 0.8rem, 16px);
  font-weight: 700;
  line-height: 1.55;
  color: #0f172a;
  letter-spacing: 0.005em;
  margin: 0;
  transition: color 0.2s ease;
}
.ns-blog-card:hover .ns-blog-card__title{
  color: var(--cat-color, #ea4341);
}

.ns-blog-card__date{
  font-size: 11.5px;
  color: #94a3b8;
  letter-spacing: 0.04em;
  margin: 0;
}

.ns-blog-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px dashed #eef2f7;
  margin-top: auto;
}
.ns-blog-card__read{
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}
.ns-blog-card__arrow{
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid #cbd5e1;
  border-bottom: 2px solid #cbd5e1;
  transform: rotate(-45deg);
  transition: transform 0.22s ease, border-color 0.22s ease;
  margin-right: 4px;
}
.ns-blog-card:hover .ns-blog-card__read{
  color: var(--cat-color, #ea4341);
}
.ns-blog-card:hover .ns-blog-card__arrow{
  border-color: var(--cat-color, #ea4341);
  transform: rotate(-45deg) translate(2px, -2px);
}

/* ---------- ページネーション（強化） ---------- */
.ns-cat-archive__pagination,
.ns-blog-archive__pagination{
  margin: 0 0 40px;
  text-align: center;
}
.ns-cat-archive__pagination .page-numbers,
.ns-blog-archive__pagination .page-numbers{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  margin: 0 3px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}
.ns-cat-archive__pagination .page-numbers:hover,
.ns-blog-archive__pagination .page-numbers:hover{
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}
.ns-cat-archive__pagination .page-numbers.current,
.ns-blog-archive__pagination .page-numbers.current{
  background: #ea4341 !important;
  border-color: #ea4341 !important;
  color: #ffffff !important;
}

/* ---------- 関連カテゴリー（縦並び末尾） ---------- */
.ns-cat-archive__related{
  margin: 32px 0 28px;
}
.ns-cat-archive__related-title{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ns-cat-archive__related-title::before{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--cat-color, #ea4341);
  border-radius: 50%;
}
.ns-cat-archive__related-title::after{
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.ns-cat-archive__related-list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ns-cat-archive__related-list li{
  margin: 0 !important;
  padding: 0 !important;
}
.ns-cat-archive__related-list a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #334155 !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ns-cat-archive__related-list a::before{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--related-color, #cbd5e1);
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.ns-cat-archive__related-list a:hover{
  background: var(--related-color, #ea4341);
  color: #ffffff !important;
  border-color: var(--related-color, #ea4341);
  transform: translateY(-1px);
}
.ns-cat-archive__related-list a:hover::before{
  background: #ffffff;
  transform: scale(1.3);
}

/* ---------- 0件時 ---------- */
.ns-cat-archive__empty{
  margin: 32px 0;
  padding: 36px 24px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  text-align: center;
  color: #475569;
  font-size: 14px;
  line-height: 1.75;
}

/* ---------- /blog ハブ + /category SP 調整 ---------- */
@media (max-width: 599px){
  /* /blog の intro: 上余白なし、左寄せ lead */
  .ns-blog-archive__intro{ margin: 0 auto 14px; padding: 0 12px; text-align: center; }
  .ns-blog-archive__lead{ text-align: left; }
  .ns-blog-archive__sections{ margin: 24px auto 16px; padding: 0 12px; }
  .ns-blog-archive__cta{ margin: 16px auto 36px; padding: 0 12px; }

  /* /category SP: deco の右に title を横並び、左寄せで適切な余白 */
  .ns-cat-archive{ padding: 18px 12px 36px; }
  .ns-cat-archive__back{ margin: 0 0 14px; }
  .ns-cat-archive__header{
    flex-direction: row;          /* deco の右に body が並ぶ */
    align-items: center;          /* 縦中央揃え */
    justify-content: flex-start;  /* 子カテで右寄り問題 → 左寄せに変更 */
    gap: 14px;
    padding: 18px 16px;
    margin: 0 0 22px;
    border-radius: 14px;
  }
  .ns-cat-archive__header-deco{
    width: 40px;                  /* SPでも大きめ */
    height: 40px;
    margin-top: 0;
  }
  .ns-cat-archive__header-deco span:nth-child(1){
    width: 13px; height: 13px;
    top: 11px; left: 4px;
  }
  .ns-cat-archive__header-deco span:nth-child(2){
    width: 9px; height: 9px;
    top: 21px; left: 22px;
  }
  .ns-cat-archive__header-deco span:nth-child(3){
    width: 7px; height: 7px;
    top: 5px; left: 26px;
  }
  .ns-cat-archive__header-body{
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;             /* deco と並ぶので左寄せ */
  }
  .ns-cat-archive__header-crumb{
    margin-bottom: 4px;
    font-size: 11px;
    gap: 6px;
  }
  .ns-cat-archive__header-title{
    font-size: 19px;
    margin-bottom: 6px;
    word-break: keep-all;
    line-height: 1.4;
  }
  .ns-cat-archive__header-meta{ margin-bottom: 6px; gap: 8px; }
  .ns-cat-archive__header-count{ font-size: 11px; padding: 2px 8px; }
  .ns-cat-archive__header-desc{
    font-size: 12.5px;
    line-height: 1.65;
  }

  .ns-cat-archive__related-list a{ font-size: 12px; padding: 7px 14px 7px 12px; }
  .ns-cat-archive__pagination .page-numbers,
  .ns-blog-archive__pagination .page-numbers{
    min-width: 34px !important;
    height: 34px !important;
    font-size: 12.5px !important;
    margin: 0 2px !important;
  }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ns-cat-archive__header-deco span,
  .ns-cat-archive__header-title::before{
    animation: none !important;
  }
  /* shimmer 擬似要素を完全非表示（本体は元々黒文字なので問題なく見える） */
  .ns-cat-archive__header-title::before{
    display: none !important;
  }
  .ns-blog-card,
  .ns-blog-card::before,
  .ns-blog-card__thumb img,
  .ns-blog-card__title,
  .ns-blog-card__arrow,
  .ns-blog-card__read,
  .ns-cat-archive__back-link,
  .ns-cat-archive__back-arrow,
  .ns-cat-archive__related-list a,
  .ns-cat-archive__related-list a::before{
    transition: none !important;
  }
}


/* =====================================================================================
 * 14. [ns_top_blog_search] — トップページMV直下用 検索セクション
 *
 *   - 上下 padding 控えめ（PC 56-64 / SP 40-44）
 *   - 罫線 + eyebrow + タイトル + サブ + 検索窓
 *   - シンプルだが上品（薄いグラデ背景 + 上端薄ライン）
 *   - 内部の [ns_blog_search] スタイルは §12 を継承
 * ===================================================================================== */
.ns-top-blog-search{
  position: relative;
  width: 100%;
  padding: 56px 16px 64px;
  /* 背景は上=薄赤 → 下=白 でグラデーション化（次セクション白背景に自然と馴染ませる） */
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, #ea4341 8%, transparent) 0%, transparent 52%),
    radial-gradient(circle at 78% 28%, color-mix(in srgb, #ea4341 6%, transparent) 0%, transparent 48%),
    linear-gradient(
      180deg,
      color-mix(in srgb, #ea4341 5%, #ffffff) 0%,
      color-mix(in srgb, #ea4341 3%, #ffffff) 35%,
      color-mix(in srgb, #ea4341 1%, #ffffff) 70%,
      #ffffff 100%
    );
  isolation: isolate;
  overflow: visible;             /* dropdown が detach されるため hidden は不要 */
  z-index: 5;                    /* 次セクションより手前を保証 */
}

/* 上端の薄いカテゴリー赤フェードライン */
.ns-top-blog-search::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, 90%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(234, 67, 65, 0.22) 50%,
    transparent 100%
  );
  z-index: 1;
}

.ns-top-blog-search__inner{
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}

.ns-top-blog-search__eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #ea4341;
  text-transform: uppercase;
}
.ns-top-blog-search__eyebrow-line{
  display: inline-block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #ea4341 50%, transparent 100%);
}

.ns-top-blog-search__title{
  font-size: clamp(22px, 1.8vw + 0.7rem, 34px);
  font-weight: 800;
  line-height: 1.4;
  color: #0f172a;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.ns-top-blog-search__sub{
  font-size: clamp(13px, 0.3vw + 0.7rem, 15px);
  line-height: 1.7;
  color: #475569;
  letter-spacing: 0.005em;
  margin: 0 0 28px;
}

.ns-top-blog-search__field-wrap{
  margin: 0 auto;
}
.ns-top-blog-search__field-wrap .ns-blog-search{
  margin: 0 auto;
}

@media (max-width: 599px){
  .ns-top-blog-search{ padding: 40px 14px 44px; }
  .ns-top-blog-search__title{
    font-size: clamp(19px, 5.6vw, 26px);
    margin-bottom: 8px;
    letter-spacing: 0;
  }
  .ns-top-blog-search__sub{ font-size: 12.5px; margin-bottom: 22px; }
  .ns-top-blog-search__eyebrow{ font-size: 10px; gap: 12px; margin-bottom: 12px; letter-spacing: 0.28em; }
  .ns-top-blog-search__eyebrow-line{ width: 22px; }
}

@media (prefers-reduced-motion: reduce){
  .ns-top-blog-search::before{ background: rgba(234, 67, 65, 0.18); }
}


/* =====================================================================================
 * 15. 検索窓 ドロップダウン body detach + SP メニュー検索窓ラッパー
 * ===================================================================================== */

/* ドロップダウンを document.body 直下に移動した時のスタイル
   （SWELL のフルワイドブロック = スタッキングコンテキスト超え用 / Rulebook §15 準拠）
   top/left/width は JS が getBoundingClientRect から動的に設定 */
.ns-blog-search__dropdown.is-detached{
  position: fixed !important;
  z-index: 9999 !important;
  margin: 0 !important;
  max-height: min(540px, 70vh);
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.10),
    0 28px 64px rgba(15, 23, 42, 0.22);
}

@media (max-width: 599px){
  .ns-blog-search__dropdown.is-detached{
    max-height: 60vh;
  }
}

/* SP メニュー上部に自動挿入された検索窓のラッパー */
.ns-spmenu-search-wrap{
  padding: 8px 16px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 2;
}
.ns-spmenu-search-wrap .ns-blog-search--bare .ns-blog-search__field{
  background: #ffffff;
  border-color: #e2e8f0;
}
/* 念のため：body 直下に置かれた sleeper（移動前）は表示しない */
.ns-spmenu-search-wrap[hidden]{ display: none; }
body > .ns-spmenu-search-wrap:not([hidden]){
  /* SP メニューが見つからず移動できなかった保険として、body 直下にあるなら非表示 */
  display: none;
}
/* =============================================================================
 *  記事内 追従見出しピル + 目次オーバーレイ（ns_blog single）
 * =============================================================================
 *  アクセント = ノーサイドブランド赤 #ea4341 / 墨 #1a1a1a。
 *  現在地表示は背景tint + アクセント色（border-left 等の縦罫線は使わない）。 */
.single-ns_blog .entry-content h2,
.single-ns_blog .entry-content h3 { scroll-margin-top: var(--ns-toc-offset, 90px); }

.ns-toc-pill {
	position: fixed;
	left: 50%;
	bottom: var(--ns-toc-pill-bottom, 22px);
	transform: translateX(-50%) translateY(16px);
	z-index: 1200;
	display: flex;
	align-items: center;
	gap: 11px;
	width: max-content;
	max-width: min(92vw, 520px);
	padding: 8px 15px 8px 10px;
	background: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	border: 1px solid rgba(26, 26, 26, 0.10);
	border-radius: 999px;
	box-shadow: 0 12px 36px rgba(26, 26, 26, 0.15);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
	font-family: inherit;
}
.ns-toc-pill.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.ns-toc-pill:hover { box-shadow: 0 16px 42px rgba(26, 26, 26, 0.22); }

.ns-toc-pill__ring { position: relative; width: 34px; height: 34px; flex: 0 0 auto; }
.ns-toc-pill__ring svg { width: 34px; height: 34px; transform: rotate(-90deg); display: block; }
.ns-toc-pill__ring-bg { fill: none; stroke: rgba(234, 67, 65, 0.18); stroke-width: 3; }
.ns-toc-pill__ring-fg { fill: none; stroke: #ea4341; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.2s ease; }
.ns-toc-pill__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #ea4341; }

.ns-toc-pill__body { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.ns-toc-pill__label { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: rgba(26, 26, 26, 0.5); }
.ns-toc-pill__current { margin-top: 2px; font-size: 13px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ns-toc-pill__chev { flex: 0 0 auto; width: 16px; height: 16px; color: rgba(26, 26, 26, 0.42); }

.ns-toc-overlay { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.32s ease, visibility 0.32s; }
.ns-toc-overlay.is-open { opacity: 1; visibility: visible; }
.ns-toc-overlay__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ns-toc-overlay__panel {
	position: relative;
	width: min(92vw, 560px);
	max-height: 74vh;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(26, 26, 26, 0.08);
	border-radius: 18px;
	box-shadow: 0 30px 80px rgba(20, 20, 20, 0.28);
	overflow: hidden;
	transform: scale(0.96) translateY(10px);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}
.ns-toc-overlay.is-open .ns-toc-overlay__panel { transform: scale(1) translateY(0); opacity: 1; }
.ns-toc-overlay__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 20px 14px; border-bottom: 1px solid rgba(26, 26, 26, 0.08); }
.ns-toc-overlay__heading { display: flex; flex-direction: column; gap: 3px; }
.ns-toc-overlay__title { margin: 0; font-size: 18px; font-weight: 700; color: #1a1a1a; letter-spacing: 0.02em; }
.ns-toc-overlay__close { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(26, 26, 26, 0.14); border-radius: 50%; background: transparent; color: #1a1a1a; cursor: pointer; transition: background 0.15s ease, transform 0.2s ease; }
.ns-toc-overlay__close:hover { background: rgba(26, 26, 26, 0.06); transform: rotate(90deg); }

.ns-toc-overlay__list { list-style: none; margin: 0; padding: 10px 12px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ns-toc__link { display: flex; gap: 11px; align-items: baseline; text-decoration: none; padding: 10px 12px; border-radius: 10px; color: #1a1a1a; transition: background 0.15s ease, color 0.15s ease; }
.ns-toc__link:hover { background: rgba(234, 67, 65, 0.07); }
.ns-toc__num { flex: 0 0 auto; min-width: 22px; font-size: 12px; font-weight: 700; color: #ea4341; }
.ns-toc__text { font-size: 15px; font-weight: 600; line-height: 1.55; }
.ns-toc__item--h3 .ns-toc__link { padding-left: 34px; padding-top: 7px; padding-bottom: 7px; }
.ns-toc__item--h3 .ns-toc__text { font-size: 13.5px; font-weight: 500; color: rgba(26, 26, 26, 0.74); }
.ns-toc__item.is-active > .ns-toc__link { background: rgba(234, 67, 65, 0.10); }
.ns-toc__item.is-active .ns-toc__text { color: #ea4341; }
.ns-toc__item.is-active .ns-toc__num { color: #ea4341; }

body.ns-no-scroll { overflow: hidden; }

@media (max-width: 600px) {
	.ns-toc-overlay { align-items: flex-end; }
	.ns-toc-overlay__panel { width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; transform: translateY(100%); }
	.ns-toc-overlay.is-open .ns-toc-overlay__panel { transform: translateY(0); }
	.ns-toc-pill { bottom: var(--ns-toc-pill-bottom, 14px); padding: 7px 13px 7px 9px; max-width: 95vw; }
	.ns-toc-pill__current { font-size: 12.5px; }
	/* SP: 目次リンクの行間を詰める */
	.ns-toc__link { padding-bottom: 3px; }
	.ns-toc__item--h3 .ns-toc__link { padding-top: 3px; padding-bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) {
	.ns-toc-pill, .ns-toc-overlay, .ns-toc-overlay__panel, .ns-toc-pill__ring-fg { transition: none; }
}

/* =========================================================
 * サイトフッター(統合・ダークネイビー)  .ns-sitefooter + .l-footer
 *   footer.php(子)から ns_render_footer_menu() で出力。
 *   上段: 自社メディア(AI経営手帖)全幅ハイライト
 *   中段: 記事カテゴリー一覧(テキストリンクのみ・装飾なし)
 *   直後のSWELL標準フッター(.l-footer)を同色・控えめに統合。
 * ========================================================= */
.ns-sitefooter{
	background:#1b2533;
	color:#d7dde5;
	padding:52px 24px 8px;
}
.ns-sitefooter__inner{
	max-width:1120px;
	margin:0 auto;
}

/* 自社メディア(AI経営手帖)全幅ハイライト */
.ns-fmedia{
	display:flex;
	align-items:center;
	gap:26px;
	padding:20px 26px;
	border-radius:14px;
	text-decoration:none;
	color:inherit;
	background:linear-gradient(120deg,rgba(245,230,211,.10) 0%,rgba(201,100,66,.16) 60%,rgba(161,78,50,.20) 100%);
	border:1px solid rgba(245,230,211,.32);
	transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
	margin-bottom:40px;
}
.ns-fmedia:hover{
	transform:translateY(-2px);
	border-color:rgba(245,230,211,.6);
	box-shadow:0 14px 40px rgba(8,12,22,.4),0 0 26px rgba(201,100,66,.22);
}
.ns-fmedia__logo{flex:0 0 auto;display:flex;align-items:center;}
.ns-fmedia__logo img{display:block;width:auto;height:42px;max-width:220px;object-fit:contain;}
.ns-fmedia__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px;}
.ns-fmedia__eyebrow{font-size:16px;font-weight:800;letter-spacing:.02em;color:#F5E6D3;line-height:1.45;}
.ns-fmedia__desc{font-size:13px;line-height:1.7;color:rgba(255,255,255,.7);}
.ns-fmedia__link{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	font-weight:700;
	color:#fff;
	padding:11px 20px;
	border-radius:10px;
	background:linear-gradient(135deg,#C96442 0%,#A14E32 100%);
	box-shadow:0 6px 18px rgba(201,100,66,.36);
	white-space:nowrap;
	transition:transform .3s ease;
}
.ns-fmedia__link svg{width:18px;height:18px;transition:transform .3s ease;}
.ns-fmedia:hover .ns-fmedia__link svg{transform:translateX(3px);}
@media(max-width:768px){
	.ns-fmedia{flex-direction:column;align-items:stretch;gap:16px;padding:20px;text-align:center;}
	.ns-fmedia__logo{order:1;justify-content:center;width:100%;}
	.ns-fmedia__body{order:2;width:100%;text-align:center;}
	.ns-fmedia__link{order:3;align-self:center;margin-left:auto;margin-right:auto;}
}

/* 記事カテゴリー一覧(テキストリンクのみ) */
.ns-sitefooter__cats{margin-bottom:8px;}
.ns-sitefooter__cats-label{
	margin:0 0 14px;
	font-size:14px;
	font-weight:700;
	letter-spacing:.04em;
	color:#fff;
}
.ns-sitefooter__catlist{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:10px 28px;
}
@media(min-width:680px){.ns-sitefooter__catlist{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1000px){.ns-sitefooter__catlist{display:flex;flex-wrap:wrap;gap:10px 30px;}}
.ns-sitefooter__catlink{
	color:#aeb6c1;
	text-decoration:none;
	font-size:14px;
	font-weight:600;
	line-height:1.5;
	transition:color .2s ease;
}
.ns-sitefooter__catlink:hover,
.ns-sitefooter__catlink:focus-visible{color:#fff;}
@media(max-width:600px){
	.ns-sitefooter{padding:40px 16px 6px;}
}


/* =========================================================
 * 追従お問い合わせFAB + オーバーレイ  .ns-contact-fab / .ns-contact-modal
 *   右下に追従。クリックでオーバーレイにCF7フォーム(984)を表示。
 *   記事ページ(single-ns_blog)ではFABを出さず、目次オーバーレイ内の
 *   ボタンから window.nsOpenContactModal() で開く。
 * ========================================================= */
.ns-contact-fab{
	position:fixed;
	right:26px;
	bottom:26px;
	z-index:1100;
	display:inline-flex;
	align-items:center;
	gap:9px;
	padding:14px 22px;
	border:none;
	border-radius:14px;
	background:#0b1120;
	color:#ffffff;
	font-size:15px;
	font-weight:700;
	letter-spacing:.02em;
	cursor:pointer;
	box-shadow:0 10px 28px rgba(11,17,32,.32);
	transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,opacity .25s ease;
}
.ns-contact-fab:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 34px rgba(11,17,32,.4);
}
.ns-contact-fab__icon{width:21px;height:21px;flex:none;}
.ns-contact-fab__label{white-space:nowrap;}
.ns-contact-fab__label--sp{display:none;}
body:has(.ns-contact-modal.is-open) .ns-contact-fab{opacity:0;pointer-events:none;}
.single-ns_blog .ns-contact-fab{display:none !important;}
@media(max-width:600px){
	.ns-contact-fab{
		right:14px;
		bottom:12px;
		padding:11px 16px;
		border-radius:12px;
		font-size:13px;
		gap:7px;
	}
	.ns-contact-fab__icon{width:18px;height:18px;}
	.ns-contact-fab__label--pc{display:none;}
	.ns-contact-fab__label--sp{display:inline;}
}

.ns-contact-modal{
	position:fixed;
	inset:0;
	z-index:1300;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px 16px;
}
.ns-contact-modal[hidden]{display:none;}
.ns-contact-modal__backdrop{
	position:absolute;
	inset:0;
	background:rgba(8,12,20,.55);
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
	opacity:0;
	transition:opacity .3s ease;
}
.ns-contact-modal.is-open .ns-contact-modal__backdrop{opacity:1;}
.ns-contact-modal__panel{
	position:relative;
	width:100%;
	max-width:640px;
	max-height:90vh;
	overflow:auto;
	background:#ffffff;
	border-radius:14px;
	box-shadow:0 24px 60px rgba(8,12,20,.4);
	opacity:0;
	transform:translateY(16px) scale(.98);
	transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1);
	-webkit-overflow-scrolling:touch;
}
.ns-contact-modal.is-open .ns-contact-modal__panel{
	opacity:1;
	transform:translateY(0) scale(1);
}
.ns-contact-modal__close{
	position:absolute;
	top:10px;
	right:10px;
	z-index:5;
	width:38px;
	height:38px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:none;
	border-radius:999px;
	background:rgba(255,255,255,.86);
	color:#0b1120;
	cursor:pointer;
	transition:background .2s ease;
}
.ns-contact-modal__close:hover{background:#ffffff;}
.ns-contact-modal__body{padding:0;}
.ns-contact-modal__body .ns-form-2026-final{border-radius:14px;overflow:hidden;}
@media(max-width:600px){
	.ns-contact-modal{padding:0;}
	.ns-contact-modal__panel{max-width:100%;max-height:100vh;height:100%;border-radius:0;}
	.ns-contact-modal__body .ns-form-2026-final{border-radius:0;}
}

/* 記事内 目次オーバーレイ内のお問い合わせボタン(控えめ・極端な丸みなし) */
.ns-toc-overlay__head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ns-toc-contact{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:8px 14px;
	border-radius:10px;
	border:1px solid rgba(15,23,42,.18);
	background:#fff;
	color:#0b1120;
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.01em;
	white-space:nowrap;
	cursor:pointer;
	transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.ns-toc-contact:hover{background:#0b1120;color:#fff;border-color:#0b1120;transform:translateY(-1px);}
.ns-toc-contact svg{width:15px;height:15px;flex:none;}
@media(max-width:600px){
	.ns-toc-contact{padding:7px 11px;font-size:11.5px;}
	.ns-toc-contact__txt{display:none;}
}

/* =====================================================================
 * お問い合わせフォーム(CF7 984)Zoom日時ピッカー
 *   Zoom「希望する」選択時のみ第3候補までのカレンダー式日時選択を表示。
 *   配色はフォーム既存トーンに調和(選択=ネイビー#0b1120 / 操作・確定=ブルー#2563eb
 *   / 土曜=青#2563eb / 日曜・祝日=赤#dc2626)。スコープは .ns-form-2026-final 配下のみ。
 *   /contact/ 固定ページと追従FABモーダルの両方で同一に適用される。
 *   JSは functions.php の ns_contact_datetime_picker_js()(wp_footer)。
 * ===================================================================== */

/* Zoom 動的サブフィールド(JSで .is-open 付与・max-height + opacity で開閉) */
.ns-form-2026-final .ns-zoom-sub{
	max-height:0;
	opacity:0;
	overflow:hidden;
	padding:0;
	margin:0;
	background:#f8fafc;
	border-radius:6px;
	transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease,padding .25s ease,margin .25s ease;
}
.ns-form-2026-final .ns-zoom-sub.is-open{
	max-height:1400px;
	opacity:1;
	padding:16px 16px 14px;
	margin:10px 0 4px;
	border-top:1px solid #e2e8f0;
}
.ns-form-2026-final .ns-zoom-sub .ns-label{margin-bottom:4px;}
.ns-form-2026-final .ns-zoom-sub__hint{
	margin:0 0 10px !important;
	padding:0 !important;
	font-size:13px;
	line-height:1.7;
	color:#64748b;
}
/* 日時についての補足テキスト欄(任意・行数に応じて自動拡張=JS auto-grow) */
.ns-form-2026-final .ns-zoom-sub__notewrap{margin-top:16px;}
.ns-form-2026-final .ns-zoom-sub__notewrap .wpcf7-form-control-wrap{display:block;}
.ns-form-2026-final .ns-zoom-note{
	width:100%;
	box-sizing:border-box;
	background:#fff;
	border:1px solid #cbd5e1;
	border-radius:6px;
	padding:10px 12px;
	min-height:52px;
	font-size:16px;
	line-height:1.6;
	color:#0f172a;
	font-family:inherit;
	resize:none;
	overflow:hidden;
	transition:border-color .15s ease,box-shadow .15s ease;
}
.ns-form-2026-final .ns-zoom-note::placeholder{color:#94a3b8;font-size:14px;}
.ns-form-2026-final .ns-zoom-note:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15);}
@media(prefers-reduced-motion:reduce){
	.ns-form-2026-final .ns-zoom-sub{transition:none;}
}

/* CF7 hidden text(視覚非表示・display:none は使わずCF7内部状態を維持) */
.ns-form-2026-final .ns-datetime-hidden{
	opacity:0;
	position:absolute;
	width:1px;
	height:1px;
	pointer-events:none;
	overflow:hidden;
	border:0;
	padding:0;
	margin:0;
}
.ns-form-2026-final .wpcf7-form-control-wrap:has(.ns-datetime-hidden){
	position:absolute;
	pointer-events:none;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* ハニーポット(スパム対策・人間には不可視。display:none は使わずボットに入力させて検知する) */
.ns-form-2026-final .ns-hp-wrap{
	position:absolute !important;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* ピッカー全体 */
.ns-form-2026-final .ns-datetime-picker{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin:4px 0 2px;
	position:relative;
}

/* スロットボタン(第1〜3候補) */
.ns-form-2026-final .ns-datetime-picker__slot{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:12px 16px;
	border:1px solid #cbd5e1;
	border-radius:6px;
	background:#fff;
	font-family:inherit;
	font-size:14px;
	color:#0f172a;
	cursor:pointer;
	transition:border-color .15s ease,background .15s ease;
	min-width:0;
}
.ns-form-2026-final .ns-datetime-picker__slot:hover{
	border-color:#2563eb;
	background:#eff4ff;
}
.ns-form-2026-final .ns-datetime-picker__slot--filled{
	border-color:#0b1120;
	background:#fff;
	font-weight:600;
}
.ns-form-2026-final .ns-datetime-picker__slot-num{
	flex-shrink:0;
	font-size:11px;
	font-weight:600;
	letter-spacing:.12em;
	color:#64748b;
	min-width:64px;
}
.ns-form-2026-final .ns-datetime-picker__slot--filled .ns-datetime-picker__slot-num{color:#0b1120;}
.ns-form-2026-final .ns-datetime-picker__slot-value{
	flex:1;
	min-width:0;
	white-space:normal;
	overflow-wrap:anywhere;
	word-break:keep-all;
	text-align:left;
	color:#0f172a;
	line-height:1.6;
}
.ns-form-2026-final .ns-datetime-picker__slot--empty .ns-datetime-picker__slot-value{color:#64748b;font-weight:400;}
.ns-form-2026-final .ns-datetime-picker__slot-actions{display:flex;gap:6px;flex-shrink:0;}
.ns-form-2026-final .ns-datetime-picker__slot-action{
	font-family:inherit;
	font-size:11px;
	font-weight:600;
	letter-spacing:.08em;
	padding:4px 10px;
	border:1px solid #cbd5e1;
	border-radius:5px;
	background:#fff;
	color:#64748b;
	cursor:pointer;
	transition:border-color .15s ease,color .15s ease;
}
.ns-form-2026-final .ns-datetime-picker__slot-action:hover{border-color:#2563eb;color:#2563eb;}

/* パネル(カレンダー/時刻 共通ラッパー) */
.ns-form-2026-final .ns-datetime-picker__panel{
	display:none;
	margin-top:2px;
	padding:16px;
	border:1px solid #cbd5e1;
	border-radius:8px;
	background:#fff;
	box-shadow:0 8px 24px rgba(11,17,32,.10);
	opacity:0;
	max-height:0;
	overflow:hidden;
	transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease,padding .25s ease;
}
.ns-form-2026-final .ns-datetime-picker__panel.is-open{
	display:block;
	opacity:1;
	max-height:800px;
}

/* パネル:月見出し + 戻るボタン */
.ns-form-2026-final .ns-datetime-picker__panel-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin:0 0 12px;
	padding-bottom:10px;
	border-bottom:1px solid #e2e8f0;
}
.ns-form-2026-final .ns-datetime-picker__panel-title{
	font-family:inherit;
	font-size:13px;
	font-weight:700;
	color:#0f172a;
	letter-spacing:.04em;
}
.ns-form-2026-final .ns-datetime-picker__back{
	font-family:inherit;
	font-size:11px;
	font-weight:600;
	letter-spacing:.08em;
	padding:4px 10px;
	border:1px solid #cbd5e1;
	border-radius:5px;
	background:#fff;
	color:#64748b;
	cursor:pointer;
}
.ns-form-2026-final .ns-datetime-picker__back:hover{border-color:#2563eb;color:#2563eb;}

/* カレンダー grid(月曜始まり) */
.ns-form-2026-final .ns-datetime-picker__cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.ns-form-2026-final .ns-datetime-picker__day-header{
	font-family:inherit;
	font-size:11px;
	font-weight:600;
	color:#64748b;
	text-align:center;
	padding:6px 0;
}
.ns-form-2026-final .ns-datetime-picker__day-header--sat{color:#2563eb;}
.ns-form-2026-final .ns-datetime-picker__day-header--sun{color:#dc2626;}
.ns-form-2026-final .ns-datetime-picker__day{
	font-family:inherit;
	font-size:13px;
	font-weight:500;
	color:#0f172a;
	background:#fff;
	border:1px solid #cbd5e1;
	border-radius:5px;
	padding:8px 0;
	text-align:center;
	cursor:pointer;
	transition:background .15s ease,border-color .15s ease,color .15s ease;
	min-width:0;
}
.ns-form-2026-final .ns-datetime-picker__day:hover{background:#eff4ff;border-color:#2563eb;}
.ns-form-2026-final .ns-datetime-picker__day--sat{color:#2563eb;}
.ns-form-2026-final .ns-datetime-picker__day--sun,
.ns-form-2026-final .ns-datetime-picker__day--holiday{color:#dc2626;}
.ns-form-2026-final .ns-datetime-picker__day--selected{
	background:#0b1120 !important;
	border-color:#0b1120 !important;
	color:#fff !important;
}
.ns-form-2026-final .ns-datetime-picker__day--disabled,
.ns-form-2026-final .ns-datetime-picker__day--blank{
	color:#94a3b8;
	background:#f8fafc;
	border-color:#e2e8f0;
	pointer-events:none;
	cursor:not-allowed;
}
.ns-form-2026-final .ns-datetime-picker__day--blank{background:transparent;border-color:transparent;}

/* 時刻 grid(7:00-17:00 / 30分刻み・同日複数選択可) */
.ns-form-2026-final .ns-datetime-picker__time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.ns-form-2026-final .ns-datetime-picker__time{
	font-family:inherit;
	font-size:13px;
	font-weight:500;
	color:#0f172a;
	background:#fff;
	border:1px solid #cbd5e1;
	border-radius:5px;
	padding:8px 0;
	text-align:center;
	cursor:pointer;
	transition:background .15s ease,border-color .15s ease;
	min-width:0;
}
.ns-form-2026-final .ns-datetime-picker__time:hover{background:#eff4ff;border-color:#2563eb;}
.ns-form-2026-final .ns-datetime-picker__time--disabled{
	color:#94a3b8;
	background:#f8fafc;
	border-color:#e2e8f0;
	pointer-events:none;
	cursor:not-allowed;
}
.ns-form-2026-final .ns-datetime-picker__time--selected{
	background:#0b1120 !important;
	border-color:#0b1120 !important;
	color:#fff !important;
	font-weight:600;
}
.ns-form-2026-final .ns-datetime-picker__time--selected:hover{background:#1e293b !important;border-color:#1e293b !important;}

/* 時刻 grid 上部のヒント文 */
.ns-form-2026-final .ns-datetime-picker__hint{
	margin:0 0 10px !important;
	padding:8px 12px !important;
	font-size:12px;
	line-height:1.6;
	color:#64748b;
	background:#f1f5f9;
	border-radius:5px;
	letter-spacing:.02em;
}

/* 確定ボタン領域 */
.ns-form-2026-final .ns-datetime-picker__panel-footer{
	display:flex;
	justify-content:center;
	margin-top:14px;
	padding-top:12px;
	border-top:1px solid #e2e8f0;
}
.ns-form-2026-final .ns-datetime-picker__confirm{
	font-family:inherit;
	font-size:14px;
	font-weight:700;
	letter-spacing:.06em;
	padding:11px 28px;
	border:0;
	border-radius:6px;
	background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);
	color:#fff;
	cursor:pointer;
	min-width:220px;
	transition:filter .15s ease,opacity .15s ease;
}
.ns-form-2026-final .ns-datetime-picker__confirm:hover{filter:brightness(1.06);}
.ns-form-2026-final .ns-datetime-picker__confirm--disabled,
.ns-form-2026-final .ns-datetime-picker__confirm:disabled{
	background:#cbd5e1 !important;
	color:#fff !important;
	cursor:not-allowed;
	opacity:.8;
}

/* SP 調整 */
@media(max-width:768px){
	.ns-form-2026-final .ns-datetime-picker__panel{padding:12px;}
	.ns-form-2026-final .ns-datetime-picker__cal-grid{gap:3px;}
	.ns-form-2026-final .ns-datetime-picker__day{font-size:12px;padding:7px 0;}
	.ns-form-2026-final .ns-datetime-picker__time-grid{grid-template-columns:repeat(3,1fr);gap:5px;}
	.ns-form-2026-final .ns-datetime-picker__time{font-size:14px;padding:10px 0;}
	.ns-form-2026-final .ns-datetime-picker__slot{padding:12px 14px;font-size:13px;}
	.ns-form-2026-final .ns-datetime-picker__slot-num{min-width:56px;}
	.ns-form-2026-final .ns-datetime-picker__confirm{width:100%;min-width:0;padding:12px 20px;}
	.ns-form-2026-final .ns-datetime-picker__panel-footer{margin-top:12px;padding-top:10px;}
	.ns-form-2026-final .ns-datetime-picker__hint{font-size:11px;padding:6px 10px !important;}
}
@media(prefers-reduced-motion:reduce){
	.ns-form-2026-final .ns-datetime-picker__panel,
	.ns-form-2026-final .ns-datetime-picker__slot,
	.ns-form-2026-final .ns-datetime-picker__day,
	.ns-form-2026-final .ns-datetime-picker__time{transition:none;}
}

/* =====================================================================================
   記事自動化 cmx-* 記事内図解コンポーネント（サイト全体共通CSS）
   ─ 記事自動化(202605NS記事自動化 v5.20.63〜)が本文に出力する <div class="cmx">…</div>
     形式のHTML図解(構造/手順/対比/分類)を表示するための共通CSS。記事側に <style> は
     入れない方針のため、サイト全体に1回だけここで読み込む。無いと無装飾のdivで崩れる。
   ─ 置き場所＝子テーマ style.css に集約(本プロジェクト方針。§4-4「追加CSSは使わない」/
     ns-auto-box と同じ住み分け)。全クラスが .cmx 配下にスコープ済み＝既存デザインに影響
     しない(追記のみ・既存CSS不変更)。@media print も含むためPDF保存にも対応。
   ─ ★同期ルール: 下記は原本 cmx_diagram_components.css の【設計システム部分(原本24行目
     以降)のバイト単位コピー】。ここで直接編集せず、記事自動化側の原本を更新してから再同期。
     原本: 202605NS記事自動化(Max枠)/docs/reference/assets/cmx_diagram_components.css
     同期日: 2026-06-27 / 原本md5: 41efbcf4cfb3737ea4f9d11f7f44be9c
   ─ ★注意: 原本の冒頭「導入手順」コメント(原本1〜23行)は意図的に除外した。当該コメント
     7行目に空コメント記号(半角アスタリスクを使った /＊ ＊/ 並び)が含まれ、CSSコメントを
     早期終了させて直後の .cmx 変数定義ルール(--card 等)を丸ごと破棄する不具合があるため
     (原本の"無害"注記は誤り)。設計ルール自体は一切改変していない。原本側の修正は記事自動化
     プロジェクトで別途対応のこと。
   ===================================================================================== */

/* ===== 記事391 専用デザインシステム(cmx-*・自己完結／PDF保存対応) ===== */
.cmx{--ind:#4f46e5;--ind-d:#3a32b8;--blu:#6f6cf3;--ink:#1f2435;--mut:#5b6480;
  --line:#e3e9f4;--card:#eef3fb;--cardb:#d9e3f4;--amb:#bd6f24;--ambg:#fbf2e4;--ambb:#eed7b9;
  --tea:#0e8f84;--teag:#e6f5f3;--teab:#bce4df;
  --mono:'SFMono-Regular',Menlo,Consolas,'Courier New',monospace;
  color:var(--ink);}
.cmx *{box-sizing:border-box;}
.cmx{margin:30px 0;line-height:1.85;}
.cmx .mono{font-family:var(--mono);}
.cmx .br{display:inline-block;width:38px;height:3px;border-radius:2px;background:var(--amb);vertical-align:middle;margin-right:12px;}

/* 見出しキッカー(節番号) */
.cmx-kick{display:flex;align-items:center;gap:13px;margin:6px 0 2px;}
.cmx-kick__no{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-weight:800;font-size:21px;color:#fff;
  background:linear-gradient(135deg,var(--ind),var(--blu));box-shadow:0 6px 18px rgba(79,70,229,.32);}
.cmx-kick__en{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ind);font-weight:700;
  text-transform:uppercase;}
.cmx-kick__jp{font-size:15px;color:var(--mut);font-weight:600;margin-top:1px;}

/* リード／要旨カード */
.cmx-lead{background:linear-gradient(135deg,#f4f6ff,#eef3fb);border:1px solid var(--cardb);
  border-radius:18px;padding:24px 26px;margin:24px 0;}
.cmx-lead__t{font-size:18px;font-weight:800;color:var(--ind-d);margin:0 0 8px;}
.cmx-lead p{margin:.4em 0;font-size:15.5px;}

/* 大見出しコンセプト帯 */
.cmx-hero{position:relative;overflow:hidden;border-radius:20px;padding:34px 32px;margin:26px 0;color:#fff;
  background:radial-gradient(120% 160% at 90% 5%,rgba(180,190,255,.5),rgba(180,190,255,0) 50%),
   linear-gradient(125deg,#2f2fb4 0%,#4a44dd 45%,#6f6cf3 100%);}
.cmx-hero__lab{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:5px 13px;margin-bottom:14px;}
.cmx-hero__t{font-size:25px;font-weight:900;line-height:1.45;margin:0;text-shadow:0 3px 18px rgba(20,20,80,.3);}
.cmx-hero__s{margin:12px 0 0;font-size:15px;color:#e9ebff;line-height:1.75;}

/* インデックス(目次カード) */
.cmx-index{border:1px solid var(--line);border-radius:18px;padding:22px 22px 8px;margin:24px 0;background:#fff;
  box-shadow:0 2px 14px rgba(30,40,80,.05);}
.cmx-index__h{font-size:13px;font-family:var(--mono);letter-spacing:.05em;color:var(--ind);font-weight:700;
  margin:0 0 14px;text-transform:uppercase;}
.cmx-index__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;}
.cmx-index a{display:flex;align-items:center;gap:11px;padding:8px 8px;border-radius:10px;text-decoration:none;
  color:var(--ink);border:1px solid transparent;transition:.15s;}
.cmx-index a:hover{background:var(--card);border-color:var(--cardb);}
.cmx-index a .n{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--card);color:var(--ind-d);
  font-family:var(--mono);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;}
.cmx-index a .x{font-size:14.5px;font-weight:600;line-height:1.4;}

/* ループ図 */
.cmx-loop{border:1px solid var(--cardb);border-radius:20px;padding:26px 20px;margin:24px 0;
  background:radial-gradient(130% 180% at 50% -30%,#f4f6ff,#fff 60%);}
.cmx-loop__row{display:flex;align-items:stretch;justify-content:center;gap:6px;flex-wrap:wrap;}
.cmx-loop__node{flex:1 1 0;min-width:96px;max-width:150px;text-align:center;padding:6px 4px;}
.cmx-loop__ic{width:54px;height:54px;margin:0 auto 9px;border-radius:15px;display:flex;align-items:center;
  justify-content:center;color:#fff;background:linear-gradient(135deg,var(--ind),var(--blu));
  box-shadow:0 6px 16px rgba(79,70,229,.28);}
.cmx-loop__lab{font-family:var(--mono);font-size:12.5px;color:var(--ind-d);font-weight:700;}
.cmx-loop__jp{font-size:13px;color:var(--ink);font-weight:700;margin-top:2px;}
.cmx-loop__sub{font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.5;}
.cmx-loop__arr{flex:0 0 auto;align-self:flex-start;margin-top:24px;color:#b9c2da;font-size:22px;font-weight:700;}
.cmx-loop__back{margin-top:16px;text-align:center;font-size:12.5px;color:var(--mut);
  border-top:2px dashed var(--cardb);padding-top:12px;}
.cmx-loop__back b{color:var(--ind-d);}
@media(max-width:600px){
  .cmx-loop__row{flex-direction:column;align-items:center;}
  .cmx-loop__node{max-width:none;width:100%;display:flex;align-items:center;gap:14px;text-align:left;}
  .cmx-loop__ic{margin:0;}
  .cmx-loop__arr{align-self:center;margin:2px 0;transform:rotate(90deg);}
}

/* 概念カード(薄青・角括弧ラベル・線画アイコン) */
.cmx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0;}
.cmx-card{background:var(--card);border:1px solid var(--cardb);border-radius:16px;padding:18px 18px;}
.cmx-card__ic{width:40px;height:40px;color:var(--ink);margin-bottom:10px;}
.cmx-card__t{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--ink);margin:0 0 5px;}
.cmx-card__d{font-size:13.5px;color:var(--mut);margin:0;line-height:1.7;}

/* versus 比較 */
.cmx-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:22px 0;}
.cmx-vs__col{border-radius:16px;padding:20px 20px;height:100%;}
.cmx-vs__col--bad{background:#fbf0f0;border:1px solid #f1d4d4;}
.cmx-vs__col--good{background:var(--teag);border:1px solid var(--teab);}
.cmx-vs__col--n1{background:#eef3fb;border:1px solid var(--cardb);}
.cmx-vs__col--n2{background:#fff7ec;border:1px solid var(--ambb);}
.cmx-vs__tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;
  font-weight:800;margin-bottom:8px;}
.cmx-vs__col--bad .cmx-vs__tag{color:#c0392b;}
.cmx-vs__col--good .cmx-vs__tag{color:var(--tea);}
.cmx-vs__col--n1 .cmx-vs__tag{color:var(--ind-d);}
.cmx-vs__col--n2 .cmx-vs__tag{color:var(--amb);}
.cmx-vs__txt{font-size:14.5px;color:var(--ink);line-height:1.7;}
.cmx-vs__mid{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--mut);text-align:center;}
@media(max-width:600px){.cmx-vs{grid-template-columns:1fr;}.cmx-vs__mid{padding:2px 0;}}

/* 二分割(Codexが用意／あなたが決める) */
.cmx-split{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:22px 0;border:1px solid var(--cardb);
  border-radius:16px;overflow:hidden;}
.cmx-split__c{padding:18px 18px;}
.cmx-split__c--a{background:var(--teag);}
.cmx-split__c--b{background:var(--ambg);border-left:1px solid var(--ambb);}
.cmx-split__h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;margin:0 0 11px;}
.cmx-split__c--a .cmx-split__h{color:var(--tea);}
.cmx-split__c--b .cmx-split__h{color:var(--amb);}
/* div ベース（SWELL の li マーカー二重描画を回避・テーマ非依存） */
.cmx-split__list{margin:0;padding:0;}
.cmx-split__li{font-size:14px;color:var(--ink);padding:6px 0 6px 24px;position:relative;line-height:1.65;
  list-style:none;}
.cmx-split__li::before{content:"";position:absolute;}
.cmx-split__c--a .cmx-split__li::before{left:2px;top:12px;width:9px;height:9px;border-radius:50%;
  background:var(--tea);}
.cmx-split__c--b .cmx-split__li::before{left:1px;top:8px;width:13px;height:13px;
  border:2px solid var(--amb);border-radius:4px;background:#fff;}
@media(max-width:560px){.cmx-split{grid-template-columns:1fr;}.cmx-split__c--b{border-left:0;border-top:1px solid var(--ambb);}}

/* メモリ・ボールト(ターミナル風) */
.cmx-vault{background:#161a2b;border-radius:16px;padding:18px 20px;margin:22px 0;overflow:auto;
  box-shadow:0 10px 30px rgba(20,24,50,.25);}
.cmx-vault__bar{display:flex;gap:7px;margin-bottom:12px;}
.cmx-vault__bar i{width:11px;height:11px;border-radius:50%;display:inline-block;}
.cmx-vault__bar i:nth-child(1){background:#ff5f57;}.cmx-vault__bar i:nth-child(2){background:#febc2e;}
.cmx-vault__bar i:nth-child(3){background:#28c840;}
.cmx-vault pre{margin:0;font-family:var(--mono);font-size:13px;line-height:1.85;color:#d7def0;white-space:pre;}
.cmx-vault .d{color:#8fa6ff;font-weight:700;}.cmx-vault .c{color:#7e88a8;}

/* プロンプト例(吹き出し) */
.cmx-prompt{position:relative;border:1px solid var(--cardb);background:#fbfcff;border-radius:14px;
  padding:18px 18px 16px;margin:20px 0;}
.cmx-prompt::before{content:attr(data-lab);position:absolute;top:-11px;left:16px;background:var(--ind);color:#fff;
  font-size:12px;font-weight:800;padding:3px 12px;border-radius:999px;}
.cmx-prompt p{margin:.3em 0;font-size:15px;color:var(--ink);line-height:1.8;}
.cmx-prompt .en{font-family:var(--mono);font-size:12.5px;color:var(--mut);margin-top:8px;display:block;}

/* Jason Liu 引用 */
.cmx-quote{position:relative;border-radius:16px;padding:22px 24px 20px 30px;margin:22px 0;color:#fff;
  background:linear-gradient(120deg,#3a35c4,#5b57ec);}
.cmx-quote__mark{position:absolute;top:6px;left:14px;font-size:54px;line-height:1;opacity:.35;font-family:Georgia,serif;}
.cmx-quote p{margin:0;font-size:16.5px;font-weight:700;line-height:1.75;}
.cmx-quote cite{display:block;margin-top:12px;font-size:13px;font-style:normal;color:#d7d9ff;font-weight:600;}

/* 図版フレーム(実スクショ) */
.cmx-fig{margin:24px 0;}
.cmx-fig__frame{border:1px solid var(--cardb);border-radius:16px;padding:10px;background:#fff;
  box-shadow:0 8px 26px rgba(30,40,80,.08);}
.cmx-fig__frame img{display:block;width:100%;height:auto;border-radius:9px;}
.cmx-fig__cap{font-size:13.5px;color:var(--mut);margin:11px 4px 0;line-height:1.7;}
.cmx-fig__src{font-size:12px;color:#90a;display:block;}
.cmx-fig__src{color:#8a93ad;margin-top:2px;}

/* コールアウト */
.cmx-call{border-radius:14px;padding:17px 19px;margin:22px 0;border:1px solid;}
.cmx-call__h{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14.5px;margin:0 0 7px;}
.cmx-call__h .lab{font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px;color:#fff;}
.cmx-call p{margin:0;font-size:14.5px;line-height:1.8;}
.cmx-call--point{background:#eef3fb;border-color:var(--cardb);}
.cmx-call--point .lab{background:var(--ind);}.cmx-call--point .cmx-call__h{color:var(--ind-d);}
.cmx-call--note{background:#f6f7fb;border-color:#e2e6ef;}
.cmx-call--note .lab{background:#6b7390;}.cmx-call--note .cmx-call__h{color:#4a5170;}
.cmx-call--cau{background:#fdf3ef;border-color:#f3d9cd;}
.cmx-call--cau .lab{background:#c0653b;}.cmx-call--cau .cmx-call__h{color:#a8512b;}

/* 出典行 */
.cmx-src{font-size:12.5px;color:#8a93ad;margin:8px 0 18px;}
.cmx-src a{color:#5b6480;text-decoration:underline;}

/* FAQ */
.cmx-faq{margin:18px 0;}
.cmx-faq__i{border:1px solid var(--line);border-radius:13px;margin:10px 0;padding:15px 18px;background:#fff;}
.cmx-faq__q{font-size:15.5px;font-weight:800;color:var(--ink);margin:0 0 7px;display:flex;gap:9px;}
.cmx-faq__q::before{content:"Q";font-family:var(--mono);color:var(--ind);font-weight:800;}
.cmx-faq__a{font-size:14.5px;color:#3a4258;margin:0;line-height:1.8;display:flex;gap:9px;}
.cmx-faq__a::before{content:"A";font-family:var(--mono);color:var(--amb);font-weight:800;}

/* インライン強調 */
.cmx mark{background:linear-gradient(transparent 60%,#ffe7b8 60%);padding:0 2px;color:inherit;}
.cmx .em{color:var(--ind-d);font-weight:800;}
.cmx-tag{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ind-d);
  background:var(--card);border:1px solid var(--cardb);border-radius:7px;padding:1px 8px;}

/* PDF保存・印刷時に部品が崩れない／背景色を保つ */
@media print{
  .cmx,.cmx *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .cmx-card,.cmx-fig,.cmx-call,.cmx-quote,.cmx-vs__col,.cmx-split,.cmx-loop,.cmx-vault,
  .cmx-prompt,.cmx-index,.cmx-hero,.cmx-faq__i,.cmx-kick{break-inside:avoid;page-break-inside:avoid;}
}

/* =====================================================================================
 * ▼ 旧WPカスタマイザー「追加CSS」(swell_child・2026-06-07時点)からの移植
 *   テーマ切替で wp-custom-css が消失したため回収して統合(P0回収分)。
 *   除外: .l-content / .l-mainContent__inner(SWELL DOM) / 独自カーソル(#cursor=C-94で廃止)
 *   収録: 記事h2/h3余白調整・ns-tech-card/grid・お問い合わせフォーム本体(.ns-form-2026-final)・
 *         記事一覧マップ(.ns-article-map)
 *   ※cascade順維持のため site.css 末尾に配置(本番では追加CSSがstyle.cssより後勝ちだった)
 * ===================================================================================== */

.entry-content h2{
margin:3em 0em 1.0em 0em;
	
}

.entry-content h3{
	margin:2em 0 0.5em 0em;
}



/* =======================================================
   NOSIDE Tech Grid System v2 (High-End Design)
   ======================================================= */

/* --- グリッドレイアウト --- */
.ns-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; /* 余白を少し広げて優雅に */
    margin-top: 40px;
}

/* レスポンシブ */
@media (max-width: 959px) {
    .ns-tech-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 599px) {
    .ns-tech-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* --- カード本体 --- */
.ns-tech-card {
    background: #fff;
    /* 上部にブランドカラーのライン(初期状態でのアクセント) */
    border-top: 3px solid #ea4341;
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-radius: 4px; /* 角丸は小さくシャープに */
    
    /* 初期状態でうっすら影をつけて質感を出す */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    height: 100%;
}

/* ホバー時の変化 */
.ns-tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(234, 67, 65, 0.15); /* 赤いうっすらとした影 */
    border-color: #ea4341; /* 枠線全体が赤くなるわけではないが、馴染ませる */
}


/* リンク全体 */
.ns-tech-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 24px;
    box-sizing: border-box;
    text-decoration: none !important;
    color: inherit !important;
}


/* --- ヘッダー要素(日付・装飾線) --- */
.ns-tech-card__head {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.ns-tech-card__date {
    font-size: 0.75rem;
    color: #999;
    font-family: 'Helvetica Neue', sans-serif;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.ns-tech-card__line {
    flex-grow: 1;
    height: 1px;
    background: #f0f0f0;
    margin-left: 12px;
}


/* --- タイトル --- */
.ns-tech-card__title {
    font-size: 1.25rem; /* 大きめ */
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    margin: 0 0 16px 0;
    transition: color 0.3s;
    
    /* 3行制限 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ns-tech-card:hover .ns-tech-card__title {
    color: #ea4341;
}


/* --- 本文(ディスクリプション) --- */
.ns-tech-card__body {
    flex-grow: 1; /* フッターを底に押しやる */
}

.ns-tech-card__desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
    
    /* 3行制限 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0.9;
}


/* --- フッター(VIEW DETAILS) --- */
.ns-tech-card__footer {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    gap: 8px;
}

.ns-tech-card__more {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #333;
    transition: color 0.3s;
}

.ns-tech-card__icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc; /* 通常時はグレー */
    transition: all 0.3s;
}

.ns-tech-card__icon svg {
    width: 100%;
    height: 100%;
}

/* ホバー時のフッター変化 */
.ns-tech-card:hover .ns-tech-card__more {
    color: #ea4341;
}
.ns-tech-card:hover .ns-tech-card__icon {
    color: #ea4341;
    transform: translateX(4px);
}






/*コンタクトフォーム1のCSS開始*/

/* ====================================
   NOSIDE Ultimate Form (v13 - Premium Header Fix)
   Scope: .ns-form-2026-final
   ==================================== */

/* コンテナ(全体枠) */
.ns-form-2026-final {
  /* Colors */
  --ns-white: #ffffff;
  --ns-gray-bg: #f8fafc;
  --ns-border: #cbd5e1;
  --ns-text: #0f172a;       /* 濃いネイビーブラック */
  --ns-text-sub: #64748b;
  --ns-brand-dark: #0b1120; /* 深いダークネイビー */
  --ns-gold: #b4832c;
  --ns-accent-gold: #f59e0b; /* 明るいゴールド */
  
  /* Trust Blue Button */
  --ns-btn-bg: #2563eb;
  --ns-btn-hover: #1d4ed8;
  
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  background: var(--ns-white) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
  
  /* 赤い線を消すためborderは全廃止 */
  border: none !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0,0,0,0.03) !important;
  
  box-sizing: border-box !important;
  color: var(--ns-text) !important;
  overflow: hidden !important;
  position: relative !important;
}

@media (max-width: 600px) {
  .ns-form-2026-final {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* --- ヘッダー(完全リニューアル：依頼3) --- */
.ns-form-2026-final .ns-form-header {
  position: relative !important;
  background: #0b1120 !important; /* ベースカラー */
  padding: 0 !important;
  text-align: center !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important; /* ここでも線を消す */
}

/* ★赤い線(SWELL装飾)を完全抹消 */
.ns-form-2026-final .ns-form-header::before,
.ns-form-2026-final .ns-form-header::after,
.ns-form-2026-final .ns-form-title::before,
.ns-form-2026-final .ns-form-title::after {
  content: none !important;
  display: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* リッチな背景グラデーション */
.ns-form-2026-final .ns-header-bg {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% -20%, #1e293b 0%, #0b1120 80%) !important;
  z-index: 1 !important;
}

/* 幾何学パターン(おしゃれ感を演出) */
.ns-form-2026-final .ns-header-overlay {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.ns-form-2026-final .ns-header-inner {
  position: relative !important;
  z-index: 3 !important;
  padding: 45px 30px 40px !important; /* 上下のバランス調整 */
}

/* ゴールドの輝く下線(依頼3) */
.ns-form-2026-final .ns-header-line {
  position: relative !important;
  z-index: 4 !important;
  height: 4px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #b4832c 0%, #fcd34d 50%, #b4832c 100%) !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4) !important; /* 光彩 */
}

/* タイトル(発光表現) */
.ns-form-2026-final .ns-form-title {
  all: revert;
  display: block !important;
  color: #ffffff !important;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
  /* 文字自体を少し光らせる */
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* 説明文 */
.ns-form-2026-final .ns-form-desc {
  all: revert;
  display: block !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.8 !important;
  font-family: inherit !important;
  letter-spacing: 0.02em !important;
}

/* --- 改行の復活 --- */
.ns-form-2026-final br {
  display: none !important; 
}
.ns-form-2026-final .ns-br-show {
  display: block !important;
  content: "" !important;
  margin-top: 5px !important;
}

/* --- ボディ部分 --- */
.ns-form-2026-final .ns-form-body {
  padding: 25px !important; /* PC: 25px */
  background: #fff !important;
}

@media (max-width: 600px) {
  .ns-form-2026-final .ns-header-inner {
    padding: 30px 15px !important;
  }
  .ns-form-2026-final .ns-form-title {
    font-size: 22px !important;
  }
  .ns-form-2026-final .ns-form-desc {
    font-size: 13px !important;
    text-align: center !important;
  }
  .ns-form-2026-final .ns-form-body {
    padding: 20px 15px !important;
  }
}

/* --- 各入力項目のまとまり --- */
.ns-form-2026-final .ns-input-group {
  margin-bottom: 15px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 自動挿入タグのリセット */
.ns-form-2026-final p {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- ラベル --- */
.ns-form-2026-final .ns-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ns-text) !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

/* バッジ */
.ns-form-2026-final .ns-badge-req,
.ns-form-2026-final .ns-badge-any {
  font-size: 11px !important;
  padding: 3px 12px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

.ns-form-2026-final .ns-badge-req {
  background: var(--ns-gold) !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(180, 131, 44, 0.2) !important;
}
.ns-form-2026-final .ns-badge-any {
  background: #cbd5e1 !important;
  color: #fff !important;
}

/* --- 入力欄 --- */
.ns-form-2026-final .ns-input {
  width: 100% !important;
  background: var(--ns-gray-bg) !important;
  border: 1px solid var(--ns-border) !important;
  border-radius: 4px !important;
  padding: 5px 8px !important;
  min-height: 44px !important; 
  font-size: 16px !important;
  color: var(--ns-text) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  appearance: none !important;
  font-weight: 500 !important;
  margin: 0 !important;
  max-width: 100% !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

.ns-form-2026-final .ns-input::placeholder {
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.ns-form-2026-final .ns-input:focus {
  outline: none !important;
  background: #fff !important;
  border-color: var(--ns-btn-bg) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.ns-form-2026-final textarea.ns-input {
  min-height: 160px !important;
  resize: vertical !important;
  padding: 10px 8px !important;
}

/* セレクトボックス矢印 */
.ns-form-2026-final .ns-select-wrapper {
  position: relative !important;
  display: block !important;
}
.ns-form-2026-final .ns-select-wrapper::after {
  content: '' !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 2px solid var(--ns-text-sub) !important;
  border-bottom: 2px solid var(--ns-text-sub) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ラジオボタン(Zoom) */
.ns-form-2026-final .ns-radio-cards .wpcf7-list-item {
  display: inline-block !important;
  margin: 0 10px 10px 0 !important;
}

.ns-form-2026-final .ns-radio-cards input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.ns-form-2026-final .ns-radio-cards .wpcf7-list-item-label {
  display: flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  background: var(--ns-white) !important;
  border: 1px solid var(--ns-border) !important;
  border-radius: 50px !important;
  color: var(--ns-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.ns-form-2026-final .ns-radio-cards input[type="radio"]:checked + .wpcf7-list-item-label {
  background: var(--ns-brand-dark) !important;
  border-color: var(--ns-brand-dark) !important;
  color: #fff !important;
}

/* --- 送信エリア --- */
.ns-form-2026-final .ns-submit-wrapper {
  margin-top: 30px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--ns-border) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.ns-form-2026-final .ns-micro-copy {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ns-text) !important;
  margin-bottom: 24px !important;
  display: inline-block !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 480px) {
  .ns-form-2026-final .ns-micro-copy {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

/* 送信ボタン(アイコン付き) */
.ns-form-2026-final .ns-btn-container {
  width: 100% !important;
  text-align: center !important;
}

.ns-form-2026-final .ns-submit-btn {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 20px 30px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--ns-btn-bg) 0%, var(--ns-btn-hover) 100%) !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3), 0 2px 4px -1px rgba(37, 99, 235, 0.15) !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
}

.ns-form-2026-final .ns-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4) !important;
  filter: brightness(1.1) !important;
}

.ns-form-2026-final .ns-btn-icon {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

.ns-form-2026-final .wpcf7-spinner {
  position: absolute !important;
  margin-top: 15px !important;
}

/* プライバシーポリシー */
.ns-form-2026-final .ns-privacy-note {
  margin-top: 50px !important;
  font-size: 11px !important;
  color: #cbd5e1 !important;
  line-height: 1.5 !important;
}
.ns-form-2026-final .ns-privacy-note a {
  color: #94a3b8 !important;
  text-decoration: underline !important;
  transition: color 0.2s !important;
}
.ns-form-2026-final .ns-privacy-note a:hover {
  color: var(--ns-text-sub) !important;
}

/* エラー */
.ns-form-2026-final .wpcf7-not-valid-tip {
  color: #ef4444 !important;
  font-size: 12px !important;
  margin-top: 6px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
}
.ns-form-2026-final .ns-input.wpcf7-not-valid {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}


/*コンタクトフォーム1のCSSここまで*/





/* =========================================
このヘッダーのロゴ調整のためのCSSはstyle.cssへ移動0504 ========================================= */





/* =========================================
SPメニューのデザイン調整のためのCSS
SPハンバーガーメニュー デザイン開始
これもstyle.cssへ移動0504
========================================= */







/* ===== 記事一覧ページ260425自動化作業時(/media-index/)===== */
.ns-article-map__intro {
    margin: 0 0 32px;
    font-size: 15px;
    color: #555;
    line-height: 1.8;
}
.ns-article-map__section {
    margin: 0 0 40px;
    padding: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
}
.ns-article-map__heading {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    padding-bottom: 10px;
    border-bottom: 2px solid #0f172a;
}
.ns-article-map__subheading {
    margin: 24px 0 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: #334155;
    padding-left: 12px;
    border-left: 3px solid #ea4341;
}
.ns-article-map__child {
    margin-left: 8px;
}
.ns-article-map__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ns-article-map__item {
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
}
.ns-article-map__item:first-child {
    border-top: none;
}
.ns-article-map__link {
    display: inline-block;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    color: #0f172a;
    line-height: 1.6;
}
.ns-article-map__link:hover {
    color: #ea4341;
    text-decoration: underline;
}
.ns-article-map__url {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: #94a3b8;
    word-break: break-all;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .ns-article-map__section { padding: 16px; }
    .ns-article-map__heading { font-size: 19px; }
    .ns-article-map__link { font-size: 14px; }
}

/* =====================================================================================
 * ▼ 標準フッター(.site-footer)のダークネイビー統合
 *   旧SWELL .l-footer 統合ルールを新テーマDOM(.site-footer)へ書換移植。
 *   ns-sitefooter(上段)と地続きの一枚に見せる。
 * ===================================================================================== */
.site-footer{
	background:#1b2533;
	margin-top:0;
	border-top:1px solid rgba(255,255,255,.08);
}
.site-footer .site-footer__inner{background:transparent;padding-top:18px;padding-bottom:18px;}
.site-footer .site-footer-nav__list{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	gap:2px 18px;
	margin:0 0 10px;
	padding:0;
	list-style:none;
}
.site-footer .site-footer-nav__list li{margin:0;}
.site-footer .site-footer-nav__list a{
	color:rgba(255,255,255,.5);
	font-size:12px;
	line-height:1.6;
	text-decoration:none;
	transition:color .2s ease;
}
.site-footer .site-footer-nav__list a:hover{color:rgba(255,255,255,.85);}
@media(max-width:600px){
	.site-footer .site-footer-nav__list{gap:1px 1px;}
}
.site-footer .site-footer__copy{
	color:rgba(255,255,255,.4);
	font-size:11px;
	text-align:center;
	display:block;
	margin:0;
}


/* =====================================================================================
 * §H. ヘッダー(P2・案件実装 2026-07-02)
 *   旧swell_child §9(873〜1949行)のデザイン値を新DOM(.ns-header/.ns-gnav/.ns-fixbar/
 *   .ns-spnav)へ移植。SWELL打消しの !important ハックは全廃(方針C-93=忠実再現+洗練)。
 *   DOM: template-parts/header.php ／ 機能: inc/site-header.php ／ JS: assets/js/site-header.js
 *   z-index体系: ヘッダー900 / 追従バー1000 / FAB1100 / 目次1200-1300 / SPドロワー1400
 * ===================================================================================== */

/* -------------------------------------------------------------------------------------
 * H-1. 通常ヘッダー(.ns-header)— 下層=白・通常フロー / トップ=透過absolute
 * ------------------------------------------------------------------------------------- */
.ns-header{
  position: relative;
  z-index: 900;
  background: #fdfdfd;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.ns-header__inner{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 6px clamp(20px, 3.33vw, 48px);
}
.ns-header__logo{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}
.ns-header__logo img{
  display: block;
  height: 42px;
  width: auto;
}

/* トップページ: 透過ヘッダー(ダークヒーローに重なる・文字白) */
.ns-header--transparent{
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  background: transparent;
  box-shadow: none;
}

/* -------------------------------------------------------------------------------------
 * H-2. PCグローバルナビ(.ns-gnav)— 項目・下線アニメ・▼マーク(旧9-7)
 * ------------------------------------------------------------------------------------- */
.ns-gnav{ margin-left: auto; }
.ns-gnav__list{
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ns-gnav__list li{ margin: 0; padding: 0; list-style: none; }
.ns-gnav__list > .menu-item > a{
  position: relative;
  display: block;
  padding: 10px 16px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
  text-decoration: none;
  border-radius: 3px;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.ns-gnav__list > .menu-item:not(.ns-menu-cta):hover > a,
.ns-gnav__list > .menu-item:not(.ns-menu-cta):focus-within > a{
  background: rgba(15, 23, 42, 0.04);
}

/* 透過ヘッダー時: ナビ白文字+白ホバー */
.ns-header--transparent .ns-gnav__list > .menu-item > a{ color: #fff; }
.ns-header--transparent .ns-gnav__list > .menu-item:not(.ns-menu-cta):hover > a,
.ns-header--transparent .ns-gnav__list > .menu-item:not(.ns-menu-cta):focus-within > a{
  background: rgba(255, 255, 255, 0.10);
}

/* ttl 基底 */
.ns-gnav__list > .menu-item > a .ttl{
  position: relative;
  display: inline-block;
}

/* 下線アニメ: 子なし・非CTAのみ */
.ns-gnav__list > .menu-item:not(.menu-item-has-children):not(.ns-menu-cta) > a .ttl::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 2px;
  background: #ea4341;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.ns-gnav__list > .menu-item:not(.menu-item-has-children):not(.ns-menu-cta):hover > a .ttl::after,
.ns-gnav__list > .menu-item:not(.menu-item-has-children):not(.ns-menu-cta):focus-within > a .ttl::after{
  transform: scaleX(1);
}

/* 親項目(子あり)の▼マーク */
.ns-gnav__list > .menu-item-has-children > a .ttl{ padding-right: 16px; }
.ns-gnav__list > .menu-item-has-children > a .ttl::before{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-65%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .55;
  transition: transform .25s ease, opacity .2s ease;
}
.ns-gnav__list > .menu-item-has-children:hover > a .ttl::before{
  transform: translateY(-25%) rotate(225deg);
  opacity: 1;
}

/* 外部リンクアイコン(walker=inc/site-footer.php が .ttl 内へ実SVG注入) */
.ns-gnav .ns-ext-ic{
  display: inline-block;
  vertical-align: -1px;
  margin-left: 5px;
  opacity: .85;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------------------
 * H-3. PCサブメニュー(ドロップダウン)— 白面+赤トップライン+連番(旧9-8)
 * ------------------------------------------------------------------------------------- */
.ns-gnav__list > .menu-item-has-children{ position: relative; }

.ns-gnav .sub-menu{
  counter-reset: submenu-item;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #ececec;
  border-top: 3px solid #ea4341;
  border-radius: 0 0 6px 6px;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.14),
    0 2px 8px rgba(15, 23, 42, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .22s;
  z-index: 100;
}

/* hover領域を切らない隙間ブリッジ */
.ns-gnav__list > .menu-item-has-children::before{
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
  pointer-events: none;
}
.ns-gnav__list > .menu-item-has-children:hover::before{ pointer-events: auto; }

.ns-gnav__list > .menu-item-has-children:hover > .sub-menu,
.ns-gnav__list > .menu-item-has-children:focus-within > .sub-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0s;
}

/* 子項目 */
.ns-gnav .sub-menu > .menu-item:not(:last-child) > a{ border-bottom: 1px solid #f5f5f5; }
.ns-gnav .sub-menu > .menu-item > a{
  position: relative;
  display: block;
  padding: 13px 38px 13px 44px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #1a1a1a;
  text-decoration: none;
  background: transparent;
  transition:
    background .18s ease,
    color .15s ease,
    padding-left .2s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}
.ns-gnav .sub-menu > .menu-item > a .ttl{
  position: static;
  display: inline;
  padding-right: 0;
}
.ns-gnav .sub-menu > .menu-item > a .ttl::after,
.ns-gnav .sub-menu > .menu-item > a .ttl::before{
  content: none;
  display: none;
}

/* 左: CSS counter 連番(01, 02…) */
.ns-gnav .sub-menu > .menu-item > a::before{
  counter-increment: submenu-item;
  content: counter(submenu-item, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #cbd5e1;
  font-family: "Helvetica Neue", Arial, sans-serif;
  transition:
    color .18s ease,
    transform .25s cubic-bezier(.2,.8,.2,1),
    letter-spacing .25s ease;
  pointer-events: none;
}

/* 右: →マーク(border描画・hoverで出現) */
.ns-gnav .sub-menu > .menu-item > a::after{
  content: "";
  display: block;
  position: absolute;
  right: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid #ea4341;
  border-bottom: 2px solid #ea4341;
  transform: translateY(-65%) rotate(-45deg) translateX(-4px);
  opacity: 0;
  transition: opacity .15s ease, transform .2s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.ns-gnav .sub-menu > .menu-item > a:hover{
  background: rgba(234, 67, 65, 0.06);
  color: #ea4341;
  padding-left: 52px;
}
.ns-gnav .sub-menu > .menu-item > a:hover::before{
  color: #ea4341;
  transform: translateY(-50%) scale(1.18);
  letter-spacing: 0.14em;
}
.ns-gnav .sub-menu > .menu-item > a:hover::after{
  opacity: 1;
  transform: translateY(-65%) rotate(-45deg) translateX(0);
}

/* -------------------------------------------------------------------------------------
 * H-4. PC CTAボタン(.ns-menu-cta = 無料相談・お問い合わせ)(旧9-9)
 * ------------------------------------------------------------------------------------- */
.ns-gnav__list > li.ns-menu-cta{ margin-left: 12px; }
.ns-gnav__list > li.ns-menu-cta > a{
  display: inline-block;
  padding: 14px 28px;
  background: #ea4341;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 6px 18px rgba(234, 67, 65, 0.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ns-gnav__list > li.ns-menu-cta > a .ttl{ color: #fff; display: inline; }
.ns-gnav__list > li.ns-menu-cta > a .ttl::after,
.ns-gnav__list > li.ns-menu-cta > a .ttl::before{ content: none; display: none; }
.ns-gnav__list > li.ns-menu-cta > a:hover{
  background: #d63a39;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(234, 67, 65, 0.35);
}

/* -------------------------------------------------------------------------------------
 * H-5. ヘッダー内 記事検索窓(旧: SWELLヘッダーウィジェットの [ns_blog_search_bare])
 * ------------------------------------------------------------------------------------- */
.ns-header__search{
  flex: 0 0 auto;
  width: 262px;
}

/* -------------------------------------------------------------------------------------
 * H-6. PC追従バー(.ns-fixbar)— スクロールでスライドイン(旧9-5/9-6)
 * ------------------------------------------------------------------------------------- */
.ns-fixbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  transform: translateY(-105%);
  transition: transform .34s cubic-bezier(.2,.8,.2,1);
}
.ns-fixbar.is-visible{ transform: translateY(0); }
.ns-fixbar__inner{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 2vw;
}
.ns-fixbar .ns-header__logo img{ height: 42px; }
.ns-fixbar .ns-gnav__list > .menu-item > a{
  padding: 10px 14px;
  font-size: 13px;
  color: #1a1a1a;
}
.ns-fixbar .ns-gnav__list > .menu-item-has-children > a .ttl{ padding-right: 14px; }
.ns-fixbar .ns-gnav__list > .menu-item-has-children > a .ttl::before{ width: 5px; height: 5px; }
.ns-fixbar .ns-gnav__list > li.ns-menu-cta > a{
  padding: 12px 24px;
  border-radius: 5px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(234, 67, 65, 0.25);
}
.ns-fixbar .ns-header__search{ width: 240px; }

/* -------------------------------------------------------------------------------------
 * H-7. SPハンバーガーボタン(3本線・PCでは非表示)
 * ------------------------------------------------------------------------------------- */
.ns-spnav-btn{
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 55px;
  height: 55px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ns-spnav-btn__bar{
  display: block;
  width: 22px;
  height: 1.8px;
  border-radius: 1px;
  background: #1a1a1a;
  transition: background .2s ease;
}
.ns-header--transparent .ns-spnav-btn__bar{ background: #fff; }

/* -------------------------------------------------------------------------------------
 * H-8. レスポンシブ振り分け(PC≥960 / SP≤959)
 * ------------------------------------------------------------------------------------- */
@media (max-width: 959px){

  /* ヘッダー: ロゴ+ハンバーガーのみ。下層は sticky 常時追従(旧SWELL SP挙動) */
  .ns-header{
    position: sticky;
    top: 0;
  }
  .ns-header--transparent{
    position: absolute;
    top: 0;
  }
  .ns-header__inner{
    min-height: 55px;
    padding: 0 0 0 20px;
    gap: 8px;
  }
  .ns-header__logo img{ height: 35px; }
  .ns-header .ns-gnav,
  .ns-header__search{ display: none; }
  .ns-spnav-btn{ display: inline-flex; }

  /* 追従バーはPC専用 */
  .ns-fixbar{ display: none; }

  /* SPトップの追従ヘッダー:
     透過ヘッダー(トップのみ)はダークヒーローへ y=0 で重ねるため absolute 必須で、
     下層の sticky と違いスクロールで流れ去る(=SPトップだけ追従要素が無いのが不具合の真因)。
     JSが閾値超えで付ける .is-stuck を SP幅でのみ固定ソリッドヘッダーとして実体化し、
     下層 sticky と同じ「常時ハンバーガーが届く」追従をトップにも与える。
     PC は .is-stuck に反応するCSSを持たないので従来どおり別要素の追従バーが担当する。 */
  .ns-header--transparent.is-stuck{
    position: fixed;
    top: 0;
    background: #fdfdfd;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    animation: ns-header-stick-in .34s cubic-bezier(.2,.8,.2,1);
  }
  .ns-header--transparent.is-stuck .ns-spnav-btn__bar{ background: #1a1a1a; }
}
@keyframes ns-header-stick-in{
  from{ transform: translateY(-100%); }
  to{ transform: translateY(0); }
}

@media (min-width: 960px){
  .ns-spnav-btn{ display: none; }
  .ns-spnav{ display: none; }
}

/* -------------------------------------------------------------------------------------
 * H-9. SP開閉ドロワー(.ns-spnav)= Premium Dark(旧9-10〜9-11cを新DOMへ移植)
 *   フッター(#1b2533)と世界観統一のダークネイビー。開閉トリガーは
 *   html[data-ns-spnav="opened"](JS=site-header.js)。
 * ------------------------------------------------------------------------------------- */
@media (max-width: 959px){

  .ns-spnav{
    --ns-navy: #1b2533;
    --ns-ink: #f1f5f9;          /* 主要項目テキスト */
    --ns-ink-soft: #aeb6c1;     /* ミュート(フッターと同色) */
    --ns-ink-faint: #7f8b9c;    /* MENUラベル */
    --ns-line: rgba(255,255,255,.09);
    --ns-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");

    position: fixed;
    inset: 0;
    z-index: 1400;
  }
  .ns-spnav[hidden]{ display: none; }

  /* 背面幕(旧SWELLオーバーレイの暗さに合わせる) */
  .ns-spnav__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 8, .72);
    opacity: 0;
    transition: opacity .3s ease;
  }
  html[data-ns-spnav="opened"] .ns-spnav__backdrop{ opacity: 1; }

  /* パネル: 左からスライドイン。上→下でわずかに沈むグラデ(奥行き) */
  .ns-spnav__panel{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(343px, 88vw);
    background: linear-gradient(180deg, #1f2937 0%, #1b2533 42%, #161e2a 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-103%);
    transition: transform .38s cubic-bezier(.22,1,.36,1);
    box-shadow: 8px 0 40px rgba(0,0,0,.35);
  }
  html[data-ns-spnav="opened"] .ns-spnav__panel{ transform: translateX(0); }
  .ns-spnav__panel:focus{ outline: none; } /* JSがフォーカスを移す先(リング不要) */

  /* 開いている間は背面スクロールを止める */
  html[data-ns-spnav="opened"]{ overflow: hidden; }

  /* 閉じる ✕(左上・明色) */
  .ns-spnav__close{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    padding: 0;
    border: none;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  /* 検索窓(半透明ダークフィールド)
     z-index: サジェストのドロップダウンを後続のMENU/CTA(段階リビールの
     アニメがスタッキングコンテキストを作る)より上に出す */
  .ns-spnav__search{
    position: relative;
    z-index: 5;
    padding: 0 20px 4px;
  }
  .ns-spnav__search .ns-blog-search__field{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 11px;
    color: #cbd5e1;
  }
  .ns-spnav__search .ns-blog-search__input{
    color: #f1f5f9;
    background: transparent;
  }
  .ns-spnav__search .ns-blog-search__input::placeholder{
    color: rgba(203,213,225,.5);
  }

  /* MENUラベル(小・ミュート・字間広) */
  .ns-spnav__label{
    margin: 0;
    padding: 18px 22px 12px;
    color: var(--ns-ink-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    line-height: 1;
    text-align: left;
  }

  /* メニュー本体 */
  .ns-spnav__nav{ padding-top: 4px; }
  .ns-spnav__list{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ns-spnav__list > li{
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--ns-line);
  }
  .ns-spnav__list > li > a{
    position: relative;
    display: block;
    padding: 12px 22px;
    color: var(--ns-ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .18s ease, background .18s ease;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .ns-spnav__list > li:not(.ns-menu-cta) > a:hover,
  .ns-spnav__list > li:not(.ns-menu-cta) > a:active{
    background: rgba(255,255,255,.045);
    color: #ffffff;
  }
  .ns-spnav__list > li.current-menu-item > a{
    color: #ffffff;
    font-weight: 800;
    background: rgba(255,255,255,.05);
  }

  /* CTA(無料相談・お問い合わせ)= 白の主ボタン */
  .ns-spnav__list > li.ns-menu-cta{
    margin: 18px 20px 8px;
    border-bottom: none;
  }
  .ns-spnav__list > li.ns-menu-cta > a{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 15px 52px;
    background: #ffffff;
    color: #16202e;
    font-size: 14.5px;
    font-weight: 850;
    letter-spacing: .02em;
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(0,0,0,.30);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ns-spnav__list > li.ns-menu-cta > a::before{
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--ns-icon-mail) center/contain no-repeat;
            mask: var(--ns-icon-mail) center/contain no-repeat;
  }
  .ns-spnav__list > li.ns-menu-cta > a:active{
    transform: scale(.99);
    box-shadow: 0 4px 14px rgba(0,0,0,.30);
  }

  /* 最下部: 自社メディア「AI経営手帖」(白ロゴ+note・クリーム→テラコッタ極薄パネル) */
  .ns-spnav__media{
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* ロゴとnoteの左端を完全一致 */
    gap: 9px;
    margin: 16px 20px 22px;
    padding: 16px 18px;
    background: linear-gradient(125deg, rgba(245,230,211,.06) 0%, rgba(201,100,66,.11) 100%);
    border: 1px solid rgba(245,230,211,.16);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .3s ease, transform .3s ease;
  }
  .ns-spnav__media-logo{
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    object-fit: contain;
  }
  .ns-spnav__media-note{
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: rgba(245,230,211,.72);
  }
  .ns-spnav__media:active{
    border-color: rgba(245,230,211,.4);
    transform: scale(.995);
  }
  /* ナビとの意味的区切り(パネル内・メディアブロック上) */
  .ns-spnav__media::before{ content: none; }

  /* 段階リビール: blur→sharp で順に立ち上がる(旧9-11c) */
  @keyframes nsSpItemIn{
    0%   { opacity: 0; transform: translateY(22px); filter: blur(5px); }
    55%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  html[data-ns-spnav="opened"] .ns-spnav__search,
  html[data-ns-spnav="opened"] .ns-spnav__label,
  html[data-ns-spnav="opened"] .ns-spnav__list > li,
  html[data-ns-spnav="opened"] .ns-spnav__media{
    animation: nsSpItemIn .55s cubic-bezier(.22,1,.36,1) both;
  }
  html[data-ns-spnav="opened"] .ns-spnav__search{ animation-delay: 0s; }
  html[data-ns-spnav="opened"] .ns-spnav__label{ animation-delay: .06s; }
  html[data-ns-spnav="opened"] .ns-spnav__list > li:nth-child(1){ animation-delay: .12s; }
  html[data-ns-spnav="opened"] .ns-spnav__list > li:nth-child(2){ animation-delay: .18s; }
  html[data-ns-spnav="opened"] .ns-spnav__list > li:nth-child(3){ animation-delay: .24s; }
  html[data-ns-spnav="opened"] .ns-spnav__list > li:nth-child(4){ animation-delay: .30s; }
  html[data-ns-spnav="opened"] .ns-spnav__list > li:nth-child(5){ animation-delay: .36s; }
  html[data-ns-spnav="opened"] .ns-spnav__list > li:nth-child(n+6){ animation-delay: .40s; }
  html[data-ns-spnav="opened"] .ns-spnav__media{ animation-delay: .44s; }
}

@media (max-width: 959px) and (prefers-reduced-motion: reduce){
  .ns-header--transparent.is-stuck{ animation: none; }
  .ns-spnav__panel{ transition: none; }
  html[data-ns-spnav="opened"] .ns-spnav__search,
  html[data-ns-spnav="opened"] .ns-spnav__label,
  html[data-ns-spnav="opened"] .ns-spnav__list > li,
  html[data-ns-spnav="opened"] .ns-spnav__media{
    animation: none;
  }
}

/* =====================================================================================
 * §I. トップページ(front-page.php・P3・案件実装 2026-07-03)
 *    トップはfullWideバンドの積み重ね=タイトルなし・main上下padding 0。
 *    ヒーローがy=0から始まり透過ヘッダー(§H)が重なる(本番SWELL時代と同じ構造)。
 *    バンド間の垂直リズムは swell-compat.css(fullWide互換)が担当。
 * ===================================================================================== */
.site-main--front {
  padding-block: 0;
}

.site-main--front .entry-content > :last-child {
  margin-bottom: 0;
}

/* =====================================================================================
 * §J. 記事個別CSS(旧swell_meta_cssの新テーマ移管・P4・2026-07-03)
 *    ns_blog はページ単位CSS自動読込(is_page限定)の対象外のため、
 *    body class の .postid-<ID> でスコープしてここに置く。
 *    記事リライトでSWELL記法を廃止する際に該当ブロックごと削除してよい。
 * ===================================================================================== */

/* --- 記事1316 hp-check: H1タイトルの折り返し調整(旧 .c-postTitle__ttl) --- */
.postid-1316 .entry-title {
  line-break: strict;
}

@media (max-width: 768px) {
  .postid-1316 .entry-title {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* --- 記事1428 hub-attracting-customers: 記事専用装飾(本文が使用中・本番同等) ---
   ※ ns-frame-warn / ns-frame-point の border-left は既存記事の現行デザインの忠実復元。
      §4-4の新規border-left禁止とは別枠(リライト時にns-auto-boxへ置換予定)。 */
.postid-1428 .ns-xl-red {
  font-size: 1.4em;
  font-weight: 700;
  color: #c0392b;
  line-height: 1.8;
}

.postid-1428 .ns-frame-blue {
  border: 2px solid #3498db;
  border-radius: 8px;
  padding: 1.3em 1.5em;
  margin: 1.8em 0;
  background: #f4f9fd;
}

.postid-1428 .ns-frame-gray {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1.2em 1.5em;
  margin: 1.5em 0;
  background: #fafafa;
}

.postid-1428 .ns-frame-warn {
  border-left: 4px solid #e74c3c;
  padding: 1em 1.5em;
  margin: 1.5em 0;
  background: #fef5f5;
  border-radius: 0 6px 6px 0;
}

.postid-1428 .ns-frame-point {
  border-left: 4px solid #3498db;
  padding: 1em 1.5em;
  margin: 1.5em 0;
  background: #f4f9fd;
  border-radius: 0 6px 6px 0;
}

.postid-1428 .swl-marker.mark_yellow {
  background: linear-gradient(transparent 60%, #fff59d 60%);
}

/* =====================================================================================
 * §K. 記事下 前後記事ナビ(.post-nav)の整形(2026-07-03 嶋崎FB)
 *    ベーステーマ(content.css)は素のテキスト2行のみ=未整形で崩れて見える→
 *    ヘアライン区切り+カード型に整える(本番SWELLには無い要素・C-93洗練の範囲)。
 * ===================================================================================== */
.post-nav {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid #e5e7eb;
}

.post-nav .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.post-nav .nav-previous,
.post-nav .nav-next {
  min-width: 0;
}

/* 次の記事のみ(前が無い)でも右列に置く */
.post-nav .nav-next {
  grid-column: 2;
}

.post-nav .nav-previous {
  grid-column: 1;
}

.post-nav a {
  display: block;
  height: 100%;
  padding: 14px 16px 15px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.post-nav a:hover {
  text-decoration: none;
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

.post-nav .nav-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #9ca3af;
}

.post-nav .nav-next a {
  text-align: right;
}

@media (max-width: 599.98px) {
  .post-nav .nav-links {
    grid-template-columns: 1fr;
  }

  .post-nav .nav-previous,
  .post-nav .nav-next {
    grid-column: auto;
  }

  .post-nav .nav-next a {
    text-align: left;
  }
}

/* =====================================================================================
 * §L. トップ 事例紹介(ns-sec-cases-v10)の洗練調整(2026-07-03 嶋崎FB・C-93洗練)
 *    「カード1枚が大きすぎ主張が強い」→ カード幅400→330px・KPI数字の最大サイズを
 *    一段縮小。ベース値はpage7本文のインラインstyle(v10系)にあり、DBは無改変で
 *    ここから上書きする(SP=600px以下はインライン側の設計を維持するため601px〜限定)。
 * ===================================================================================== */
@media (min-width: 601px) {
  .ns-sec-cases-v10 .ns-case-card {
    flex: 0 0 330px;
    max-width: 330px;
  }

  .ns-sec-cases-v10 .ns-case-card-kpi {
    min-height: 64px;
  }

  .ns-sec-cases-v10 .ns-case-card-kpi .js-count {
    font-size: clamp(44px, 4.5vw, 64px);
  }

  .ns-sec-cases-v10 .ns-case-card-kpi .kpi-unit {
    font-size: clamp(15px, 1.5vw, 19px);
  }

  .ns-sec-cases-v10 .ns-case-card-kpi .kpi-suffix,
  .ns-sec-cases-v10 .ns-case-card-kpi .kpi-prefix {
    font-size: clamp(13px, 1.3vw, 16px);
  }

  .ns-sec-cases-v10 .ns-case-card.is-kpi-long .ns-case-card-kpi .js-count {
    font-size: clamp(38px, 3.8vw, 52px);
  }

  .ns-sec-cases-v10 .ns-case-card-kpi--text .kpi-text {
    font-size: clamp(22px, 2.3vw, 30px);
  }

  .ns-sec-cases-v10 .ns-case-card-kpi--compound .kpi-line--main .js-count {
    font-size: clamp(36px, 3.6vw, 46px);
  }

  .ns-sec-cases-v10 .ns-case-card-kpi--compound .kpi-sub-after {
    font-size: clamp(21px, 2.1vw, 28px);
  }

  .ns-sec-cases-v10 .ns-case-card-kpi--ba .kpi-after {
    font-size: clamp(34px, 3.6vw, 48px);
  }

  .ns-sec-cases-v10 .ns-case-card-body {
    font-size: 13px;
  }
}