/*
Theme Name:  NK Child – BtoB Service
Theme URI:   https://nk-technical.co.jp/themes/nk-child-b2b-service
Description: BtoB向け法人サービス業テーマ。信頼感・実績・課題解決訴求に特化。
Author:      NK Technical Support Inc.
Author URI:  https://nk-technical.co.jp
Template:    nk-base-theme
Version:     1.8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nk-child-b2b-service
Tags:        b2b, service, corporate, business, professional
*/

/* ============================================================
   BtoB Service – ブランドカラー変数オーバーライド
   Primary: ネイビーブルー（信頼・格式）
   Accent:  テールグリーン（成長・IT）

   ※ v1.6.2 修正：親テーマの変数名体系（--nk-primary等）と並存させるため
       --nk-primary / --nk-accent 等も同時に定義する。
       子テーマ専用変数（--nk-color-*）はそのまま履歴互換性のため存続。
   ============================================================ */
:root {
  /* ---- 子テーマ専用変数（内部参照用）---- */
  --nk-color-primary:        #0D2E5A;   /* ディープネイビー */
  --nk-color-primary-light:  #1A4A8A;
  --nk-color-primary-dark:   #081C3A;
  --nk-color-accent:         #00896A;   /* テールグリーン */
  --nk-color-accent-light:   #00B88A;
  --nk-color-accent-dark:    #006B52;
  --nk-color-bg:             #F7F9FC;
  --nk-color-bg-alt:         #EEF2F8;
  --nk-color-text:           #1A1E2D;
  --nk-color-text-muted:     #5A6478;
  --nk-color-border:         #D0D8E8;
  --nk-color-white:          #FFFFFF;
  --nk-font-base:            'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --nk-font-heading:         'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --nk-font-weight-heading:  700;
  --nk-radius:               6px;
  --nk-shadow:               0 2px 16px rgba(13,46,90,.10);
  --nk-shadow-hover:         0 6px 32px rgba(13,46,90,.18);

  /* ---- 親テーマ変数オーバーライド（--nk-primary 等）→ Customizer定義が優先だが、
       未設定時のフォールバックとして場色を定義 ---- */
  --nk-primary:              #0D2E5A;
  --nk-secondary:            #1A4A8A;
  --nk-accent:               #00896A;
  --nk-bg:                   #F7F9FC;
  --nk-bg-light:             #EEF2F8;
  --nk-text:                 #1A1E2D;
  --nk-heading:              #0D2E5A;
}

/* ============================================================
   ヘッダー – ロゴ左・ナビ右 / BtoB ブランドカラー
   親テーマの .nk-header を上書きする
   v1.6.4 変更: 固定値ではなく CSS変数（--nk-header-bg / --nk-header-text）を
   参照し、カスタマイザーで変更できるようにした。
   --nk-header-bg が未設定の場合は BtoB デフォルト（ネイビー）にフォールバック。
   ============================================================ */
.nk-header,
.site-header {
  background-color: var(--nk-header-bg, var(--nk-color-primary)) !important;
  border-bottom: 3px solid var(--nk-color-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ============================================================
 * ナビゲーション表示制御（v1.8.3 修正）
 *
 * 【修正内容】
 * v1.8.0 では display:flex !important を全幅で指定していたため、
 * モバイル（≦1024px）でも PC ナビが表示されてしまい
 * ヘッダーが横に膨らんで横スクロール崩れを引き起こしていた。
 *
 * 修正: PC 幅のみ flex を適用し、モバイルは layout.css の
 *       display:none !important を妨げない。
 * ============================================================ */
@media (min-width: 1025px) {
    .nk-header__nav,
    .nk-header #primary-nav {
        display: flex !important;
        align-items: center;
    }
    .nk-header .nk-nav--primary,
    .site-header .nk-nav--primary {
        display: flex !important;
        list-style: none;
        padding: 0;
        margin: 0;
    }
}

.nk-header .site-title a,
.nk-header .nk-nav--primary a,
.nk-header .nk-header__site-name,
.site-header .site-title a,
.site-header .nav-menu a {
  /* ヘッダーテキスト色もカスタマイザー連動。デフォルト: 白（ネイビー背景向け） */
  color: var(--nk-header-text, var(--nk-color-white)) !important;
}
.nk-header .nk-nav--primary a:hover,
.site-header .nav-menu a:hover {
  color: var(--nk-color-accent-light) !important;
}
/* アンダーライン（ホバー/カレント） */
.nk-header .nk-nav--primary > li > a::after {
  background: var(--nk-color-accent) !important;
}
/* アクションボタン（共通クラス .nk-header__cta-btn も対象） */
.nk-header__cta-btn,
.site-header .btn-contact {
  /* CTAボタン色はカスタマイザーの nk_header_cta_color から --nk-header-cta-bg に流れる */
  background-color: var(--nk-header-cta-bg, var(--nk-color-accent)) !important;
  border-color: var(--nk-header-cta-bg, var(--nk-color-accent)) !important;
  color: var(--nk-color-white);
  border-radius: var(--nk-radius);
  padding: .5rem 1.2rem;
  font-weight: 700;
  transition: background .2s;
}
.nk-header__cta-btn:hover,
.site-header .btn-contact:hover {
  filter: brightness(0.88);
}

/* ============================================================
   ヒーロー – 親テーマ .nk-hero への BtoB カラー適用

   v1.8.0 変更：文字サイズ・色・5種アニメーション設定追加。アイコン→画像切替・カード背景画像追加。
             ヘッダーメニュー表示修正・ハンバーガーPC/SP修正。
   v1.7.0 変更：セクション並び順制御・固定ページ埋め込みセクション追加。
   v1.6.4 変更：ヘッダー・フッター・CTAセクションの背景色/テキスト色をカスタマイザー連動に修正。
   v1.6.3 変更：課題提起セクション背景色・カード色・数選択をカスタマイザー連動に小修正。
   v1.6.2 変更：旧ヒーローセクションは .hero-section クラスで定義されていたが、
   親テーマ v1.6.0 からは .nk-hero クラスと hero.css に統一された。
   以下は .nk-hero への山条きに変更し、旧 .hero-section は建正互換用に残す。
   ============================================================ */

/* gradient モード時の BtoB 途布グラデーション上書き */
.nk-hero--gradient {
  background: linear-gradient(135deg, #0D2E5A 0%, #1A4A8A 50%, #00896A 100%) !important;
}

/* ヒーロー内パーティクル風想이미지（グラデーション時のみ表示） */
.nk-hero--gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 0;
}

/* ヒーローアイブロウ */
.nk-hero__eyebrow {
  background: rgba(0,137,106,.8) !important;
  color: #fff !important;
}

/* ヒーローボタン */
.nk-hero__btn--primary {
  background: var(--nk-color-accent) !important;
  border-color: var(--nk-color-accent) !important;
  box-shadow: 0 4px 18px rgba(0,137,106,.4);
}
.nk-hero__btn--primary:hover {
  background: var(--nk-color-accent-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,137,106,.5);
}

/* 建正互換: 旧テンプレート起点の .hero-section クラス（残す） */
.hero-section {
  position: relative;
  min-height: 580px;
  background: linear-gradient(135deg, #0D2E5A 0%, #1A4A8A 50%, #00896A 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ============================================================
   カスタマイザー対応：セクション共通スタイル
   ============================================================ */
.nk-section-header { text-align: center; margin-bottom: 3rem; }
.nk-section-header__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nk-color-accent);
    border-bottom: 2px solid var(--nk-color-accent);
    padding-bottom: .25rem;
    margin-bottom: .75rem;
}
.nk-section-header__title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--nk-color-primary);
    margin: 0 0 .75rem;
}
.nk-section-header__lead {
    font-size: .95rem;
    color: var(--nk-color-text-muted);
    line-height: 1.8;
    margin: 0;
}
.nk-section-more { text-align: center; margin-top: 2.5rem; }
.nk-section-more--right { text-align: right; margin-top: 1rem; }
/* ニュース行 */
.nk-news-list { border-top: 1px solid var(--nk-color-border); }
.nk-news-row {
    display: flex;
    gap: 1.2rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--nk-color-border);
}
.nk-news-row__date { color: var(--nk-color-text-muted); font-size: .85rem; white-space: nowrap; }
.nk-news-row__title { font-size: .92rem; }
.nk-news-empty { color: var(--nk-color-text-muted); }

/* ============================================================
   課題・ソリューション セクション
   ※ v1.6.3: 背景色・カード色は customizer.php の CSS 変数から取得
   ============================================================ */

/*
 * セクション背景色 – customizer の --nk-section-problem-bg が優先。
 * 親テーマの !important ルールで上書きされるため、この宣言は
 * カスタマイザー未設定時のフォールバックとして機能する。
 */
.problem-section,
.nk-section--problem {
  background-color: var(--nk-section-problem-bg, var(--nk-color-bg-alt)) !important;
}

/* ──────────────────────────────────────
 * グリッドレイアウト – data-count 属性で列数を制御
 * 少ない枚数でも均等で美しく並ぶように調整
 * ────────────────────────────────────── */
.problem-grid,
.nk-prob-grid {
  display: grid;
  gap: 1.5rem;
  /* デフォルト: 3列（6枚向け） */
  grid-template-columns: repeat(3, 1fr);
}

/* 1枚: 中央寄せ、最大幅480px */
.nk-prob-grid[data-count="1"] {
  grid-template-columns: minmax(280px, 480px);
  justify-content: center;
}
/* 2枚: 2列、最大幅720px */
.nk-prob-grid[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
/* 3枚: 3列 */
.nk-prob-grid[data-count="3"] {
  grid-template-columns: repeat(3, 1fr);
}
/* 4枚: 4列（タブレットで2列） */
.nk-prob-grid[data-count="4"] {
  grid-template-columns: repeat(4, 1fr);
}
/* 5枚: 3+2 の特殊レイアウト */
.nk-prob-grid[data-count="5"] {
  grid-template-columns: repeat(3, 1fr);
}
/* 最後の1枚（5枚目）を中央に */
.nk-prob-grid[data-count="5"] .nk-prob-card:last-child {
  grid-column: 2;
}
/* 6枚: 3列 */
.nk-prob-grid[data-count="6"] {
  grid-template-columns: repeat(3, 1fr);
}
/* 7枚: 4+3 レイアウト → 4列ベース */
.nk-prob-grid[data-count="7"] {
  grid-template-columns: repeat(4, 1fr);
}
/* 最後の3枚を2行目中央に */
.nk-prob-grid[data-count="7"] .nk-prob-card:nth-child(5),
.nk-prob-grid[data-count="7"] .nk-prob-card:nth-child(6),
.nk-prob-grid[data-count="7"] .nk-prob-card:nth-child(7) {
  /* 4列中の2〜4列目に集める */
}
/* 8枚: 4列 × 2行 */
.nk-prob-grid[data-count="8"] {
  grid-template-columns: repeat(4, 1fr);
}

/* カードスタイル
 * 背景色・枠線色・テキスト色は customizer CSS 変数で制御 */
.problem-card,
.nk-prob-card {
  /* CSS変数優先 → 未設定時に子テーマ変数へフォールバック */
  background-color: var(--nk-prob-card-bg, #ffffff) !important;
  border: 2px solid var(--nk-prob-card-border, var(--nk-color-border)) !important;
  border-radius: var(--nk-radius);
  padding: 1.8rem;
  position: relative;
  transition: border-color .2s, box-shadow .2s;
}
.problem-card:hover,
.nk-prob-card:hover {
  border-color: var(--nk-color-primary-light) !important;
  box-shadow: var(--nk-shadow);
}
.problem-card .problem-icon,
.nk-prob-card__icon {
  width: 48px; height: 48px;
  background: var(--nk-color-bg-alt);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.problem-card .problem-title,
.nk-prob-card__title {
  font-size: 1rem;
  font-weight: 700;
  /* CSS変数優先（customizer連動） → フォールバック */
  color: var(--nk-prob-card-title, var(--nk-color-primary)) !important;
  margin-bottom: .5rem;
}
.problem-card .problem-text,
.nk-prob-card__text {
  font-size: .9rem;
  color: var(--nk-prob-card-text, var(--nk-color-text-muted)) !important;
  line-height: 1.7;
}

/* ============================================================
   強み・特徴 セクション（3カラムアイコン）
   ============================================================ */
.strength-section { background: var(--nk-color-white); }
.strength-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  text-align: center;
}
.strength-item .strength-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--nk-color-primary) 0%, var(--nk-color-primary-light) 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
  font-size: 1.8rem;
  color: #fff;
  box-shadow: 0 4px 16px rgba(13,46,90,.3);
}
.strength-item .strength-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nk-color-primary);
  margin-bottom: .5rem;
}
.strength-item .strength-text { font-size: .88rem; color: var(--nk-color-text-muted); line-height: 1.7; }

/* ============================================================
   実績数値バナー
   ============================================================ */
.stats-bar {
  background: linear-gradient(90deg, var(--nk-color-primary) 0%, var(--nk-color-primary-light) 100%);
  padding: 3rem 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.stat-item .stat-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--nk-color-white);
  line-height: 1;
}
.stat-item .stat-number span { font-size: .6em; font-weight: 400; }
.stat-item .stat-label {
  font-size: .85rem;
  color: rgba(255,255,255,.78);
  margin-top: .4rem;
}

/* ============================================================
   サービス一覧カード
   ============================================================ */
.service-card {
  background: var(--nk-color-white);
  border-radius: var(--nk-radius);
  overflow: hidden;
  box-shadow: var(--nk-shadow);
  transition: transform .25s, box-shadow .25s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--nk-shadow-hover);
}
.service-card .service-card-header {
  background: linear-gradient(135deg, var(--nk-color-primary), var(--nk-color-primary-light));
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.service-card .service-card-header .service-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.15);
  border-radius: var(--nk-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #fff;
}
.service-card .service-card-header .service-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.service-card .service-card-body { padding: 1.5rem; }
.service-card .service-card-body p { font-size: .9rem; color: var(--nk-color-text-muted); line-height: 1.7; margin-bottom: 1rem; }
.service-card .service-card-body .btn-detail {
  color: var(--nk-color-accent);
  font-weight: 700;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.service-card .service-card-body .btn-detail::after { content: '→'; }

/* ============================================================
   導入事例カード
   ============================================================ */
.case-card {
  background: var(--nk-color-white);
  border-radius: var(--nk-radius);
  box-shadow: var(--nk-shadow);
  overflow: hidden;
  transition: box-shadow .25s;
}
.case-card:hover { box-shadow: var(--nk-shadow-hover); }
.case-card .case-industry-badge {
  display: inline-block;
  background: var(--nk-color-bg-alt);
  color: var(--nk-color-primary);
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .8rem;
  border-radius: 2px;
  margin-bottom: .8rem;
}
.case-card .case-client { font-size: .9rem; color: var(--nk-color-text-muted); margin-bottom: .5rem; }
.case-card .case-title { font-size: 1.05rem; font-weight: 700; color: var(--nk-color-primary); margin-bottom: .8rem; }
.case-card .case-result {
  background: linear-gradient(135deg, rgba(0,137,106,.08), rgba(0,137,106,.15));
  border-left: 3px solid var(--nk-color-accent);
  padding: .8rem 1rem;
  font-size: .88rem;
  color: var(--nk-color-accent-dark);
  font-weight: 600;
  border-radius: 0 var(--nk-radius) var(--nk-radius) 0;
}

/* ============================================================
   CTA セクション
   ============================================================ */
.cta-section {
  background: linear-gradient(135deg, var(--nk-color-primary-dark) 0%, var(--nk-color-primary) 100%);
  padding: 5rem 0;
  text-align: center;
}
.cta-section .cta-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}
.cta-section .cta-lead { color: rgba(255,255,255,.8); font-size: 1rem; margin-bottom: 2rem; line-height: 1.8; }
.cta-section .cta-btn-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-section .btn-cta-primary {
  background: var(--nk-color-accent);
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: var(--nk-radius);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 4px 20px rgba(0,137,106,.45);
  transition: transform .2s, box-shadow .2s;
}
.cta-section .btn-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,137,106,.55); }
.cta-section .btn-cta-secondary {
  background: transparent;
  border: 2px solid rgba(255,255,255,.55);
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: var(--nk-radius);
  font-weight: 600;
  font-size: 1.05rem;
  transition: border-color .2s, background .2s;
}
.cta-section .btn-cta-secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ============================================================
   フッター
   v1.6.4: --nk-footer-bg / --nk-footer-text をカスタマイザー連動に
   ============================================================ */
.site-footer,
.nk-footer {
  background-color: var(--nk-footer-bg, var(--nk-color-primary-dark)) !important;
  color: var(--nk-footer-text, rgba(255,255,255,.75));
  font-size: .85rem;
}
.site-footer a,
.nk-footer a { color: var(--nk-footer-text, rgba(255,255,255,.6)); opacity: .8; }
.site-footer a:hover,
.nk-footer a:hover { opacity: 1; color: #fff; }
.site-footer .footer-logo,
.nk-footer .footer-logo { color: #fff; font-size: 1.2rem; font-weight: 700; }
.footer-divider { border-color: rgba(255,255,255,.12); }

/* ============================================================
   固定ページ埋め込みセクション（.nk-page-block）
   v1.7.0 追加: カスタマイザーから固定ページをトップページに埋め込む際のスタイル
   ============================================================ */
.nk-section--page {
  /* 背景色はインラインスタイル（カスタマイザー値）で上書きされる */
  padding: 5rem 0;
}

/* ページコンテンツの基本リセット */
.nk-page-block__content {
  max-width: 100%;
  line-height: 1.8;
  color: var(--nk-color-text, #1A1E2D);
}

/* Gutenbergブロック幅を親コンテナに合わせる */
.nk-page-block__content .wp-block-group,
.nk-page-block__content .wp-block-columns {
  max-width: 100%;
}

/* 画像をレスポンシブに */
.nk-page-block__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nk-radius, 6px);
}

/* 見出し装飾 */
.nk-page-block__content h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--nk-color-primary, #0D2E5A);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--nk-color-accent, #00896A);
}
.nk-page-block__content h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--nk-color-primary, #0D2E5A);
  margin-bottom: .75rem;
}

/* リスト */
.nk-page-block__content ul,
.nk-page-block__content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.nk-page-block__content li { margin-bottom: .4rem; line-height: 1.7; }

/* テーブル */
.nk-page-block__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin-bottom: 1.5rem;
}
.nk-page-block__content th,
.nk-page-block__content td {
  padding: .7rem 1rem;
  border: 1px solid var(--nk-color-border, #D0D8E8);
  text-align: left;
  vertical-align: top;
}
.nk-page-block__content th {
  background: var(--nk-color-bg-alt, #EEF2F8);
  font-weight: 700;
  color: var(--nk-color-primary, #0D2E5A);
}

/* Gutenberg ボタン */
.nk-page-block__content .wp-block-button__link {
  background: var(--nk-color-primary, #0D2E5A);
  color: #fff;
  border-radius: var(--nk-radius, 6px);
  padding: .75rem 2rem;
  text-decoration: none;
  font-weight: 700;
  transition: background .2s;
}
.nk-page-block__content .wp-block-button__link:hover {
  background: var(--nk-color-accent, #00896A);
}

/* ============================================================
   レスポンシブ補正
   ============================================================ */
/* ============================================================
   レスポンシブ補正
   ============================================================ */
@media (max-width: 768px) {
  .hero-section { min-height: 420px; }
  .hero-section .hero-cta-group { flex-direction: column; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  /* 768px以下: すべてのグリッドを1列 */
  .problem-grid,
  .nk-prob-grid,
  .nk-prob-grid[data-count],
  .strength-grid { grid-template-columns: 1fr !important; }
  /* 5枚時の中央寄せ指定を解除 */
  .nk-prob-grid[data-count="5"] .nk-prob-card:last-child {
    grid-column: auto;
  }
}

/* タブレット（769〜1024px）: 4列は2列に縮退 */
@media (min-width: 769px) and (max-width: 1024px) {
  .nk-prob-grid[data-count="4"],
  .nk-prob-grid[data-count="7"],
  .nk-prob-grid[data-count="8"] {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 5枚時の中央寄せも解除 */
  .nk-prob-grid[data-count="5"] .nk-prob-card:last-child {
    grid-column: auto;
  }
}

/* ============================================================
   v1.8.0: スクロールアニメーション
   5種類: fade-up / fade-in / slide-left / zoom-in / flip-in
   IntersectionObserver (b2b.js) が .is-visible を付与したとき発動
   prefers-reduced-motion 配慮済み
   ============================================================ */

/* ── 初期状態（アニメーション前）── */
.nk-animate {
  opacity: 0;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: opacity, transform;
  /* data-delay 属性をCSS変数経由で受け取る（JSでセット） */
  transition-delay: var(--nk-anim-delay, 0ms);
}

/* アニメーション種別ごとの初期変換 */
.nk-animate[data-animation="fade-up"]    { transform: translateY(40px); }
.nk-animate[data-animation="fade-in"]    { transform: none; }
.nk-animate[data-animation="slide-left"] { transform: translateX(60px); }
.nk-animate[data-animation="zoom-in"]    { transform: scale(0.85); }
.nk-animate[data-animation="flip-in"]    { transform: rotateX(-30deg); transform-origin: top center; }

/* ── 発動後（.is-visible が付いたとき）── */
.nk-animate.is-visible {
  opacity: 1;
  transform: none !important;
}

/* ── 動作なし設定 ── */
.nk-animate[data-animation="none"] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* モーション抑制設定の尊重 */
@media (prefers-reduced-motion: reduce) {
  .nk-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   v1.8.0: カード背景画像モード
   ============================================================ */
.nk-prob-card--has-bg-image {
  color: #fff;
  position: relative;
  overflow: hidden;
}
.nk-prob-card--has-bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 46, 90, 0.55);
  z-index: 0;
}
.nk-prob-card--has-bg-image > * {
  position: relative;
  z-index: 1;
}
.nk-prob-card--has-bg-image .nk-prob-card__title { color: #fff !important; }
.nk-prob-card--has-bg-image .nk-prob-card__text  { color: rgba(255,255,255,.85) !important; }

/* ============================================================
   v1.8.0: アイコン画像モード
   v1.8.3: 表示サイズ・背景画像モード時の可読性を強化
   ============================================================ */
.nk-prob-card__icon--image {
  background: none !important; /* 絵文字用の背景円を打ち消す */
  border-radius: 0;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.nk-prob-card__icon--image img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--nk-radius);
  display: block;
  /* 画像が正しく読み込まれない場合に破損アイコンを表示しない */
  min-height: 1px;
}

/* ── カード背景画像モード（nk_problem_card_bg_type = image）── */
.nk-prob-card--has-bg-image {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}
/* 背景画像の上にオーバーレイを重ねてテキストを読みやすく */
.nk-prob-card--has-bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: inherit;
  z-index: 0;
}
/* テキスト・アイコンをオーバーレイの上に表示 */
.nk-prob-card--has-bg-image > * {
  position: relative;
  z-index: 1;
}
/* 背景画像モード時は文字色を白に固定 */
.nk-prob-card--has-bg-image .nk-prob-card__title,
.nk-prob-card--has-bg-image .nk-prob-card__text {
  color: #fff !important;
}
.nk-prob-card--has-bg-image .nk-prob-card__icon {
  color: #fff !important;
}