/*
 * NK Base Theme - components.css
 * ボタン・カード・フォーム・FAQ・CTA等の共通コンポーネント
 */

/* ============================================================
   ボタン基本 (v2.2.1)
   5色 × 5形状 の統一プリセット体系
   ─ 背景・枠線・テキストを常に同一変数で制御し不一致を根絶
   ============================================================ */

/* ---- ベーススタイル ---- */
.nk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: var(--nk-btn-pad-v, .75rem) var(--nk-btn-pad-h, 2rem);
    font-weight: 600;
    font-size: var(--nk-btn-fsize, 0.9375rem);
    line-height: 1.4;
    border-radius: var(--nk-btn-radius, 6px);
    text-decoration: none;
    /* v2.2.1: border は各カラープリセット内で background と同色に統一 */
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--nk-transition, .2s ease);
    white-space: nowrap;
    font-family: inherit;
    box-sizing: border-box;
}

/* ---- サイズ修飾子 ---- */
.nk-btn--sm  { --nk-btn-pad-v: .45rem;  --nk-btn-pad-h: 1.25rem; --nk-btn-fsize: 0.8125rem; }
.nk-btn--md  { --nk-btn-pad-v: .75rem;  --nk-btn-pad-h: 2rem;    --nk-btn-fsize: 0.9375rem; }
.nk-btn--lg  { --nk-btn-pad-v: 1rem;    --nk-btn-pad-h: 2.5rem;  --nk-btn-fsize: 1.0625rem; }
.nk-btn--xl  { --nk-btn-pad-v: 1.25rem; --nk-btn-pad-h: 3rem;    --nk-btn-fsize: 1.125rem;  }
.nk-btn--full { width: 100%; }

/* ================================================================
   ■ 5色プリセット
     背景(--_bg) / 枠線(--_bd) / テキスト(--_tx) を1セットで管理。
     hover は色を暗くするだけでセット全体を追従させる。
   ================================================================ */

/* 1. Primary（ネイビー）*/
.nk-btn--primary {
    --_bg: var(--nk-btn, #1a4f8a);
    --_bd: var(--nk-btn, #1a4f8a);
    --_tx: var(--nk-btn-text, #ffffff);
    background: var(--_bg);
    border-color: var(--_bd);
    color: var(--_tx);
}
.nk-btn--primary:hover,
.nk-btn--primary:focus-visible {
    --_bg: color-mix(in srgb, var(--nk-btn, #1a4f8a) 82%, #000);
    --_bd: color-mix(in srgb, var(--nk-btn, #1a4f8a) 82%, #000);
    background: var(--_bg);
    border-color: var(--_bd);
    transform: translateY(-1px);
    box-shadow: var(--nk-shadow-md, 0 4px 16px rgba(0,0,0,.12));
}

/* 2. Secondary（ブルー）*/
.nk-btn--secondary {
    --_bg: var(--nk-secondary, #2d7dd2);
    --_bd: var(--nk-secondary, #2d7dd2);
    --_tx: #ffffff;
    background: var(--_bg);
    border-color: var(--_bd);
    color: var(--_tx);
}
.nk-btn--secondary:hover,
.nk-btn--secondary:focus-visible {
    --_bg: color-mix(in srgb, var(--nk-secondary, #2d7dd2) 82%, #000);
    --_bd: color-mix(in srgb, var(--nk-secondary, #2d7dd2) 82%, #000);
    background: var(--_bg);
    border-color: var(--_bd);
    transform: translateY(-1px);
    box-shadow: var(--nk-shadow-md, 0 4px 16px rgba(0,0,0,.12));
}

/* 3. Accent（アンバー）*/
.nk-btn--accent {
    --_bg: var(--nk-accent, #f0a500);
    --_bd: var(--nk-accent, #f0a500);
    --_tx: #ffffff;
    background: var(--_bg);
    border-color: var(--_bd);
    color: var(--_tx);
}
.nk-btn--accent:hover,
.nk-btn--accent:focus-visible {
    --_bg: color-mix(in srgb, var(--nk-accent, #f0a500) 82%, #000);
    --_bd: color-mix(in srgb, var(--nk-accent, #f0a500) 82%, #000);
    background: var(--_bg);
    border-color: var(--_bd);
    transform: translateY(-1px);
    box-shadow: var(--nk-shadow-md, 0 4px 16px rgba(0,0,0,.12));
}

/* 4. Outline（アウトライン：透明背景・Primary色枠）*/
.nk-btn--outline {
    --_bg: transparent;
    --_bd: var(--nk-primary, #1a4f8a);
    --_tx: var(--nk-primary, #1a4f8a);
    background: var(--_bg);
    border-color: var(--_bd);
    color: var(--_tx);
}
.nk-btn--outline:hover,
.nk-btn--outline:focus-visible {
    --_bg: var(--nk-primary, #1a4f8a);
    --_tx: #ffffff;
    background: var(--_bg);
    border-color: var(--nk-primary, #1a4f8a);
    color: var(--_tx);
    transform: translateY(-1px);
}

/* Outline White（ヒーロー等の暗背景向け）*/
.nk-btn--outline-white {
    --_bg: transparent;
    --_bd: #ffffff;
    --_tx: #ffffff;
    background: var(--_bg);
    border-color: var(--_bd);
    color: var(--_tx);
}
.nk-btn--outline-white:hover,
.nk-btn--outline-white:focus-visible {
    --_bg: #ffffff;
    --_tx: var(--nk-primary, #1a4f8a);
    background: var(--_bg);
    border-color: #ffffff;
    color: var(--_tx);
}

/* 5. Dark（ダークネイビー）*/
.nk-btn--dark {
    --_bg: #1e2533;
    --_bd: #1e2533;
    --_tx: #ffffff;
    background: var(--_bg);
    border-color: var(--_bd);
    color: var(--_tx);
}
.nk-btn--dark:hover,
.nk-btn--dark:focus-visible {
    --_bg: #2d3748;
    --_bd: #2d3748;
    background: var(--_bg);
    border-color: var(--_bd);
    transform: translateY(-1px);
    box-shadow: var(--nk-shadow-md, 0 4px 16px rgba(0,0,0,.12));
}

/* ================================================================
   ■ 5形状プリセット
     --nk-btn-radius を上書きするだけ。色と完全独立。
   ================================================================ */

/* shape-default: 6px 角丸（テーマデフォルト）*/
.nk-btn--shape-default { --nk-btn-radius: 6px; }

/* shape-rounded: 中程度の丸み */
.nk-btn--shape-rounded { --nk-btn-radius: 12px; }

/* shape-pill: 完全カプセル型 */
.nk-btn--shape-pill    { --nk-btn-radius: 9999px; }

/* shape-sharp: 角ばった（2px）*/
.nk-btn--shape-sharp   { --nk-btn-radius: 2px; }

/* shape-square: 完全直角 */
.nk-btn--shape-square  { --nk-btn-radius: 0; }

/* ---- 旧クラス互換エイリアス（v2.2.1以前のコードが壊れないよう残置）---- */
.nk-btn--pill    { --nk-btn-radius: 9999px; }
.nk-btn--sharp   { --nk-btn-radius: 2px; }
.nk-btn--rounded { --nk-btn-radius: 12px; }

/* ================================================================
   ■ Gutenberg core/button 互換レイヤー (v2.2.1)
     固定ページでボタン色と枠線色が一致しない問題を解消。
     WP がインラインで background-color を注入しても、
     border-color を同値に強制追従させる。
   ================================================================ */

/* Gutenberg ボタンの border-color を background-color に強制追従 */
.wp-block-button__link {
    border-width: 2px !important;
    border-style: solid !important;
}

/* Primary プリセット */
.wp-block-button.is-style-nk-primary .wp-block-button__link {
    background-color: #1a4f8a !important;
    border-color: #1a4f8a !important;
    color: #ffffff !important;
    border-radius: var(--nk-btn-radius, 6px);
    padding: .75rem 2rem;
    font-weight: 600;
    transition: .2s ease;
}
.wp-block-button.is-style-nk-primary .wp-block-button__link:hover {
    background-color: color-mix(in srgb, #1a4f8a 82%, #000) !important;
    border-color: color-mix(in srgb, #1a4f8a 82%, #000) !important;
    transform: translateY(-1px);
}

/* Secondary プリセット */
.wp-block-button.is-style-nk-secondary .wp-block-button__link {
    background-color: #2d7dd2 !important;
    border-color: #2d7dd2 !important;
    color: #ffffff !important;
    border-radius: var(--nk-btn-radius, 6px);
    padding: .75rem 2rem;
    font-weight: 600;
    transition: .2s ease;
}
.wp-block-button.is-style-nk-secondary .wp-block-button__link:hover {
    background-color: color-mix(in srgb, #2d7dd2 82%, #000) !important;
    border-color: color-mix(in srgb, #2d7dd2 82%, #000) !important;
    transform: translateY(-1px);
}

/* Accent プリセット */
.wp-block-button.is-style-nk-accent .wp-block-button__link {
    background-color: #f0a500 !important;
    border-color: #f0a500 !important;
    color: #ffffff !important;
    border-radius: var(--nk-btn-radius, 6px);
    padding: .75rem 2rem;
    font-weight: 600;
    transition: .2s ease;
}
.wp-block-button.is-style-nk-accent .wp-block-button__link:hover {
    background-color: color-mix(in srgb, #f0a500 82%, #000) !important;
    border-color: color-mix(in srgb, #f0a500 82%, #000) !important;
    transform: translateY(-1px);
}

/* Outline プリセット */
.wp-block-button.is-style-nk-outline .wp-block-button__link {
    background-color: transparent !important;
    border-color: #1a4f8a !important;
    color: #1a4f8a !important;
    border-radius: var(--nk-btn-radius, 6px);
    padding: .75rem 2rem;
    font-weight: 600;
    transition: .2s ease;
}
.wp-block-button.is-style-nk-outline .wp-block-button__link:hover {
    background-color: #1a4f8a !important;
    border-color: #1a4f8a !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Dark プリセット */
.wp-block-button.is-style-nk-dark .wp-block-button__link {
    background-color: #1e2533 !important;
    border-color: #1e2533 !important;
    color: #ffffff !important;
    border-radius: var(--nk-btn-radius, 6px);
    padding: .75rem 2rem;
    font-weight: 600;
    transition: .2s ease;
}
.wp-block-button.is-style-nk-dark .wp-block-button__link:hover {
    background-color: #2d3748 !important;
    border-color: #2d3748 !important;
    transform: translateY(-1px);
}

/* ---- Gutenberg 汎用フォールバック ----
   ユーザーがカラーピッカーで色を変えた場合も
   枠線色をインライン背景色に追従させる CSS カスタムプロパティ トリック */
.wp-block-button__link[style*="background-color"] {
    border-color: inherit;
}

/* Ghost */
.nk-btn--ghost {
    background: transparent;
    border-color: var(--nk-border, #e0e0e0);
    color: var(--nk-text, #1e1e1e);
}
.nk-btn--ghost:hover,
.nk-btn--ghost:focus-visible {
    background: var(--nk-bg-light, #f8f9fa);
    border-color: var(--nk-text-muted, #666);
}

/* Tel（電話ボタン：accent 色統一）*/
.nk-btn--tel {
    --_bg: var(--nk-accent, #f0a500);
    --_bd: var(--nk-accent, #f0a500);
    --_tx: #ffffff;
    background: var(--_bg);
    border-color: var(--_bd);
    color: var(--_tx);
}
.nk-btn--tel:hover,
.nk-btn--tel:focus-visible {
    --_bg: color-mix(in srgb, var(--nk-accent, #f0a500) 82%, #000);
    --_bd: color-mix(in srgb, var(--nk-accent, #f0a500) 82%, #000);
    background: var(--_bg);
    border-color: var(--_bd);
}

/* ================================================================
   ■ 追加バリエーション（v1.9.1〜）
     5大プリセット以外の特殊用途クラス。
     背景・枠線を常に同値に保つルールを踏襲。
   ================================================================ */

/* Gradient */
.nk-btn--gradient {
    background: linear-gradient(135deg, var(--nk-btn-grad-start, var(--nk-primary)), var(--nk-btn-grad-end, var(--nk-secondary)));
    color: var(--nk-btn-text, #fff);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
}
.nk-btn--gradient:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* Gradient Accent */
.nk-btn--gradient-accent {
    background: linear-gradient(135deg, var(--nk-accent, #f0a500), color-mix(in srgb, var(--nk-accent, #f0a500) 70%, #ff6600));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(0,0,0,.12);
}
.nk-btn--gradient-accent:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }

/* Shadow（影付き）*/
.nk-btn--shadow {
    background: var(--nk-btn, #1a4f8a);
    color: var(--nk-btn-text, #fff);
    border-color: var(--nk-btn, #1a4f8a);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--nk-btn, #1a4f8a) 50%, transparent);
}
.nk-btn--shadow:hover { transform: translateY(-3px); box-shadow: 0 12px 30px color-mix(in srgb, var(--nk-btn, #1a4f8a) 45%, transparent); }

/* Soft（薄塗り）*/
.nk-btn--soft {
    background: color-mix(in srgb, var(--nk-primary, #1a4f8a) 12%, transparent);
    color: var(--nk-primary, #1a4f8a);
    border-color: transparent;
}
.nk-btn--soft:hover { background: color-mix(in srgb, var(--nk-primary, #1a4f8a) 20%, transparent); }

/* Soft Accent */
.nk-btn--soft-accent {
    background: color-mix(in srgb, var(--nk-accent, #f0a500) 15%, transparent);
    color: var(--nk-accent, #f0a500);
    border-color: transparent;
}
.nk-btn--soft-accent:hover { background: color-mix(in srgb, var(--nk-accent, #f0a500) 25%, transparent); }

/* Success */
.nk-btn--success {
    background: var(--nk-success, #2ecc71);
    border-color: var(--nk-success, #2ecc71);
    color: #fff;
}
.nk-btn--success:hover { background: color-mix(in srgb, var(--nk-success, #2ecc71) 82%, #000); border-color: color-mix(in srgb, var(--nk-success, #2ecc71) 82%, #000); }

/* Danger */
.nk-btn--danger {
    background: var(--nk-danger, #e74c3c);
    border-color: var(--nk-danger, #e74c3c);
    color: #fff;
}
.nk-btn--danger:hover { background: color-mix(in srgb, var(--nk-danger, #e74c3c) 82%, #000); border-color: color-mix(in srgb, var(--nk-danger, #e74c3c) 82%, #000); }

/* Dark は上部の5プリセット定義に統合済み。
   ここでは hover 時の border-color 追従のみ補完。 */
.nk-btn--dark:hover {
    background: #2d3748;
    border-color: #2d3748;
    color: #fff;
}

/* White（暗背景向け：背景＆枠線ともに #fff で統一）*/
.nk-btn--white {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--nk-primary, #1a4f8a);
}
.nk-btn--white:hover,
.nk-btn--white:focus-visible {
    background: color-mix(in srgb, #ffffff 90%, #000);
    border-color: color-mix(in srgb, #ffffff 90%, #000);
    color: var(--nk-primary, #1a4f8a);
}

/* Icon 付きボタン共通余白調整 */
.nk-btn .nk-btn__icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

/* ボタングループ（横並び） */
.nk-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}
.nk-btn-group--center { justify-content: center; }
.nk-btn-group--right  { justify-content: flex-end; }

/* ================================================================
   ■ ボタン 形態（スタイル）バリエーション (v2.2.3)
     色プリセット（primary/secondary/accent/outline/dark）とは独立して
     外見のスタイルだけを切り替えるモディファイアクラス。
     組み合わせ例: class="nk-btn nk-btn--primary nk-btn--style-3d"
   ================================================================ */

/* ----------------------------------------------------------
   style-flat（フラット） — デフォルト。影なし・グラデなし
   ---------------------------------------------------------- */
.nk-btn--style-flat {
    box-shadow: none !important;
    background-image: none !important;
    filter: none !important;
}

/* ----------------------------------------------------------
   style-3d（立体感） — 下辺に暗い影でボタンを浮かせる
   ---------------------------------------------------------- */
.nk-btn--style-3d {
    box-shadow:
        0 5px 0 color-mix(in srgb, currentColor 0%, rgba(0,0,0,.35)),
        0 6px 12px rgba(0,0,0,.2);
    transform: translateY(-2px);
    border-bottom-width: 1px !important;
    transition: all .15s ease;
}
.nk-btn--style-3d:hover,
.nk-btn--style-3d:focus-visible {
    box-shadow:
        0 2px 0 color-mix(in srgb, currentColor 0%, rgba(0,0,0,.35)),
        0 3px 6px rgba(0,0,0,.2);
    transform: translateY(1px);
}
.nk-btn--style-3d:active {
    box-shadow: 0 0 0 rgba(0,0,0,.2);
    transform: translateY(3px);
}

/* ----------------------------------------------------------
   style-gloss（光沢） — 上半分に白いハイライトを重ねる
   ---------------------------------------------------------- */
.nk-btn--style-gloss {
    position: relative;
    overflow: hidden;
}
.nk-btn--style-gloss::before {
    content: '';
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.45) 0%,
        rgba(255,255,255,.10) 100%
    );
    border-radius: inherit;
    pointer-events: none;
}
.nk-btn--style-gloss:hover::before {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,.15) 100%
    );
}

/* ----------------------------------------------------------
   style-gradient（グラデーション） — 左上→右下に明るく
   ---------------------------------------------------------- */
.nk-btn--style-gradient {
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 70%, #fff) 0%,
        var(--_bg, var(--nk-btn, #1a4f8a)) 50%,
        color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 80%, #000) 100%
    ) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.nk-btn--style-gradient:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------
   style-neon（ネオン発光） — 蛍光色のグロウシャドウ
   ---------------------------------------------------------- */
.nk-btn--style-neon {
    box-shadow:
        0 0 8px  color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 80%, transparent),
        0 0 20px color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 55%, transparent),
        0 0 40px color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 35%, transparent);
    transition: box-shadow .3s ease, transform .2s ease;
}
.nk-btn--style-neon:hover,
.nk-btn--style-neon:focus-visible {
    box-shadow:
        0 0 12px color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 90%, transparent),
        0 0 30px color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 70%, transparent),
        0 0 60px color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 50%, transparent);
    transform: translateY(-1px);
}

/* ----------------------------------------------------------
   style-shadow（ドロップシャドウ） — 大きな柔らかい影
   ---------------------------------------------------------- */
.nk-btn--style-shadow {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 45%, transparent);
    transition: box-shadow .2s ease, transform .2s ease;
}
.nk-btn--style-shadow:hover,
.nk-btn--style-shadow:focus-visible {
    box-shadow: 0 14px 36px color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 55%, transparent);
    transform: translateY(-3px);
}

/* ----------------------------------------------------------
   style-underline（アンダーライン） — 枠なし・テキスト下線
   ---------------------------------------------------------- */
.nk-btn--style-underline {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--_bg, var(--nk-btn, #1a4f8a)) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    padding-left: .5rem;
    padding-right: .5rem;
}
.nk-btn--style-underline:hover,
.nk-btn--style-underline:focus-visible {
    text-decoration-thickness: 3px;
    transform: none;
    opacity: .75;
}

/* ----------------------------------------------------------
   style-text（テキストリンク風） — 最小限のビジュアル
   ---------------------------------------------------------- */
.nk-btn--style-text {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--_bg, var(--nk-btn, #1a4f8a)) !important;
    padding-left: .25rem;
    padding-right: .25rem;
    text-decoration: none;
}
.nk-btn--style-text:hover,
.nk-btn--style-text:focus-visible {
    background: color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 8%, transparent) !important;
    transform: none;
}
.nk-btn--style-text::after {
    content: ' →';
    font-size: .9em;
    transition: transform .2s ease;
    display: inline-block;
}
.nk-btn--style-text:hover::after {
    transform: translateX(4px);
}

/* ----------------------------------------------------------
   style-icon-circle（アイコン丸囲み） — アイコン専用の円形ボタン
   ---------------------------------------------------------- */
.nk-btn--style-icon-circle {
    border-radius: 50% !important;
    width: 3rem;
    height: 3rem;
    padding: 0 !important;
    font-size: 1.1rem;
}
.nk-btn--style-icon-circle.nk-btn--sm {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .9rem;
}
.nk-btn--style-icon-circle.nk-btn--lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
}
.nk-btn--style-icon-circle.nk-btn--xl {
    width: 4rem;
    height: 4rem;
    font-size: 1.4rem;
}

/* ----------------------------------------------------------
   style-border-thick（太枠アウトライン）
   ---------------------------------------------------------- */
.nk-btn--style-border-thick {
    background: transparent !important;
    border-width: 3px !important;
    border-color: var(--_bg, var(--nk-btn, #1a4f8a)) !important;
    color: var(--_bg, var(--nk-btn, #1a4f8a)) !important;
    font-weight: 700;
}
.nk-btn--style-border-thick:hover,
.nk-btn--style-border-thick:focus-visible {
    background: var(--_bg, var(--nk-btn, #1a4f8a)) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ----------------------------------------------------------
   style-split（左: アイコンブロック / 右: テキストブロック）
   ビジュアル的に分割されたCTAボタン
   ---------------------------------------------------------- */
.nk-btn--style-split {
    position: relative;
    padding-left: 3.5rem;
    overflow: visible;
}
.nk-btn--style-split .nk-btn__icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.18);
    border-radius: var(--nk-btn-radius, 6px) 0 0 var(--nk-btn-radius, 6px);
    font-size: 1rem;
}

/* ----------------------------------------------------------
   style-bounce（バウンスアニメーション） — 注目を引く動き
   ---------------------------------------------------------- */
@keyframes nk-btn-bounce {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-6px); }
    60%       { transform: translateY(-3px); }
}
.nk-btn--style-bounce:not(:hover) {
    animation: nk-btn-bounce 2.4s ease-in-out infinite;
}
.nk-btn--style-bounce:hover {
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

/* ----------------------------------------------------------
   style-pulse（パルスアニメーション） — リング状の広がり
   ---------------------------------------------------------- */
@keyframes nk-btn-pulse-ring {
    0%   { box-shadow: 0 0 0 0    color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a)) 55%, transparent); }
    70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a))  0%, transparent); }
    100% { box-shadow: 0 0 0 0    color-mix(in srgb, var(--_bg, var(--nk-btn, #1a4f8a))  0%, transparent); }
}
.nk-btn--style-pulse {
    animation: nk-btn-pulse-ring 2s ease-out infinite;
}
.nk-btn--style-pulse:hover { animation: none; }

/* ----------------------------------------------------------
   style-arrow（矢印付き → ）
   ---------------------------------------------------------- */
.nk-btn--style-arrow::after {
    content: '';
    display: inline-block;
    width: .55em;
    height: .55em;
    border-top:   2.5px solid currentColor;
    border-right: 2.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .2s ease;
    margin-left: .3em;
}
.nk-btn--style-arrow:hover::after {
    transform: rotate(45deg) translateX(3px) translateY(-3px);
}

/* ----------------------------------------------------------
   style-icon-right（右アイコン汎用余白調整）
   ---------------------------------------------------------- */
.nk-btn--style-icon-right .nk-btn__icon { order: 1; }

/* ================================================================
   ■ Gutenberg ブロックスタイル — 形態バリエーション (v2.2.3)
     is-style-nk-style-* で各形態を選択できるようにする
   ================================================================ */

/* 3D */
.wp-block-button.is-style-nk-style-3d .wp-block-button__link {
    box-shadow: 0 5px 0 rgba(0,0,0,.28), 0 6px 12px rgba(0,0,0,.18) !important;
    transform: translateY(-2px);
    transition: all .15s ease;
    border-radius: var(--nk-btn-radius, 6px);
    font-weight: 700;
}
.wp-block-button.is-style-nk-style-3d .wp-block-button__link:hover {
    box-shadow: 0 2px 0 rgba(0,0,0,.28), 0 3px 6px rgba(0,0,0,.18) !important;
    transform: translateY(1px);
}

/* 光沢 */
.wp-block-button.is-style-nk-style-gloss .wp-block-button__link {
    position: relative;
    overflow: hidden;
    border-radius: var(--nk-btn-radius, 6px);
}
.wp-block-button.is-style-nk-style-gloss .wp-block-button__link::before {
    content: '';
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,.10));
    border-radius: inherit;
    pointer-events: none;
}

/* グラデーション */
.wp-block-button.is-style-nk-style-gradient .wp-block-button__link {
    background-image: linear-gradient(135deg, rgba(255,255,255,.25) 0%, rgba(0,0,0,.15) 100%) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
    border-radius: var(--nk-btn-radius, 6px);
    transition: all .2s ease;
}
.wp-block-button.is-style-nk-style-gradient .wp-block-button__link:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* ネオン */
.wp-block-button.is-style-nk-style-neon .wp-block-button__link {
    box-shadow: 0 0 8px rgba(26,79,138,.7), 0 0 20px rgba(26,79,138,.5), 0 0 40px rgba(26,79,138,.3) !important;
    border-radius: var(--nk-btn-radius, 6px);
    transition: box-shadow .3s ease;
}
.wp-block-button.is-style-nk-style-neon .wp-block-button__link:hover {
    box-shadow: 0 0 12px rgba(26,79,138,.9), 0 0 30px rgba(26,79,138,.7), 0 0 60px rgba(26,79,138,.5) !important;
}

/* ソフトシャドウ */
.wp-block-button.is-style-nk-style-shadow .wp-block-button__link {
    box-shadow: 0 8px 24px rgba(26,79,138,.4) !important;
    border-radius: var(--nk-btn-radius, 6px);
    transition: all .2s ease;
}
.wp-block-button.is-style-nk-style-shadow .wp-block-button__link:hover {
    box-shadow: 0 14px 36px rgba(26,79,138,.55) !important;
    transform: translateY(-3px);
}

/* 太枠アウトライン */
.wp-block-button.is-style-nk-style-border-thick .wp-block-button__link {
    background: transparent !important;
    border-width: 3px !important;
    font-weight: 700;
    border-radius: var(--nk-btn-radius, 6px);
    transition: all .2s ease;
}
.wp-block-button.is-style-nk-style-border-thick .wp-block-button__link:hover {
    transform: translateY(-1px);
}

/* 矢印付き */
.wp-block-button.is-style-nk-style-arrow .wp-block-button__link::after {
    content: '';
    display: inline-block;
    width: .55em;
    height: .55em;
    border-top:   2.5px solid currentColor;
    border-right: 2.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    margin-left: .4em;
    transition: transform .2s ease;
    vertical-align: middle;
}
.wp-block-button.is-style-nk-style-arrow .wp-block-button__link:hover::after {
    transform: rotate(45deg) translateX(3px) translateY(-3px);
}

/* パルスアニメーション */
.wp-block-button.is-style-nk-style-pulse .wp-block-button__link {
    animation: nk-btn-pulse-ring 2s ease-out infinite;
    border-radius: var(--nk-btn-radius, 6px);
}
.wp-block-button.is-style-nk-style-pulse .wp-block-button__link:hover {
    animation: none;
}

/* ============================================================
   タグ・ラベル
   ============================================================ */
.nk-tag {
    display: inline-flex;
    align-items: center;
    padding: .2rem .75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--nk-radius-full);
    text-decoration: none;
    transition: var(--nk-transition);
    background: var(--nk-bg-light);
    color: var(--nk-text);
    border: 1px solid var(--nk-border);
}
.nk-tag--sm    { font-size: 0.75rem; padding: .1rem .5rem; }
.nk-tag--primary { background: var(--nk-primary); color: #fff; border-color: var(--nk-primary); }
.nk-tag a { color: inherit; text-decoration: none; }
.nk-tag:hover { background: var(--nk-primary); color: #fff; border-color: var(--nk-primary); }

/* ============================================================
   投稿カード
   ============================================================ */
.nk-post-card {
    background: #fff;
    border-radius: var(--nk-radius-md);
    overflow: hidden;
    box-shadow: var(--nk-shadow-sm);
    transition: var(--nk-transition-slow);
    display: flex;
    flex-direction: column;
}
.nk-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nk-shadow-lg);
}
.nk-post-card__thumbnail {
    aspect-ratio: 3/2;
    overflow: hidden;
    margin: 0;
}
.nk-post-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.nk-post-card:hover .nk-post-card__thumbnail img {
    transform: scale(1.05);
}
.nk-post-card__body {
    padding: var(--nk-space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.nk-post-card__cats { display: flex; gap: .4rem; flex-wrap: wrap; }
.nk-post-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    flex: 1;
}
.nk-post-card__title a {
    color: var(--nk-text);
    text-decoration: none;
}
.nk-post-card__title a:hover { color: var(--nk-primary); }
.nk-post-card__excerpt {
    font-size: 0.875rem;
    color: var(--nk-text-muted);
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.nk-post-card__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--nk-text-muted);
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--nk-border);
}

/* ============================================================
   お知らせ一覧（テーブル形式）
   ============================================================ */
.nk-news-list { list-style: none; padding: 0; }
.nk-news-list__item + .nk-news-list__item {
    border-top: 1px solid var(--nk-border);
}
.nk-news-list__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: .875rem 0;
    color: var(--nk-text);
    text-decoration: none;
    transition: var(--nk-transition);
}
.nk-news-list__link:hover { color: var(--nk-primary); }
.nk-news-list__date {
    font-size: 0.875rem;
    color: var(--nk-text-muted);
    flex-shrink: 0;
    font-family: var(--nk-font-en);
}
.nk-news-list__cat {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--nk-primary);
    color: #fff;
    padding: .1em .6em;
    border-radius: var(--nk-radius-full);
    flex-shrink: 0;
    white-space: nowrap;
}
.nk-news-list__title { flex: 1; line-height: 1.5; }

/* お知らせ詳細一覧ページ */
.nk-news-item {
    border-bottom: 1px solid var(--nk-border);
}
.nk-news-item__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 0;
    color: var(--nk-text);
    text-decoration: none;
}
.nk-news-item__link:hover { color: var(--nk-primary); }
.nk-news-item__date { font-size: 0.875rem; color: var(--nk-text-muted); flex-shrink: 0; }
.nk-news-item__cat {
    font-size: 0.75rem; font-weight: 600;
    background: var(--nk-primary); color: #fff;
    padding: .1em .6em; border-radius: var(--nk-radius-full);
    flex-shrink: 0;
}
.nk-news-item__title { flex: 1; }

/* ============================================================
   FAQ アコーディオン
   ============================================================ */
.nk-faq { display: flex; flex-direction: column; gap: 0; }

.nk-faq__item {
    border: 1px solid var(--nk-border);
    border-radius: var(--nk-radius-md);
    overflow: hidden;
    margin-bottom: .75rem;
    background: #fff;
}

.nk-faq__question {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.nk-faq__question:hover { background: var(--nk-bg-light); }

.nk-faq__q-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--nk-primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.nk-faq__q-text { flex: 1; padding-top: .25rem; line-height: 1.5; }

.nk-faq__toggle {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    flex-shrink: 0;
    margin-top: .25rem;
}
.nk-faq__toggle::before,
.nk-faq__toggle::after {
    content: '';
    position: absolute;
    background: var(--nk-text-muted);
    border-radius: 2px;
    transition: transform .3s ease;
}
.nk-faq__toggle::before {
    width: 100%; height: 2px;
    top: 50%; left: 0;
    transform: translateY(-50%);
}
.nk-faq__toggle::after {
    width: 2px; height: 100%;
    top: 0; left: 50%;
    transform: translateX(-50%);
}
.nk-faq__question[aria-expanded="true"] .nk-faq__toggle::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.nk-faq__answer {
    padding: 0 1.5rem 1.5rem;
    padding-left: calc(1.5rem + 2rem + 1rem);
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--nk-text);
}
.nk-faq__answer[hidden] { display: none; }

.nk-faq__a-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    background: var(--nk-accent);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    margin-right: .75rem;
    vertical-align: middle;
    float: left;
    margin-top: .1rem;
}

/* ============================================================
   CTA セクション
   ============================================================ */
.nk-cta-section {
    background: var(--nk-primary);
    color: #fff;
    padding-block: var(--nk-space-2xl);
}

.nk-cta-section--dark {
    background: var(--nk-bg-dark);
}

.nk-cta-section__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nk-space-xl);
    flex-wrap: wrap;
}

.nk-cta-section__heading {
    color: #fff;
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin: 0;
}
.nk-cta-section__sub {
    color: rgba(255,255,255,.8);
    margin-top: .5rem;
    margin-bottom: 0;
}

.nk-cta-section__btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .nk-cta-section__inner { flex-direction: column; text-align: center; }
    .nk-cta-section__btns { justify-content: center; }
}

/* ============================================================
   ヒーローセクション
   ============================================================ */
.nk-hero {
    min-height: clamp(400px, 60vh, 700px);
    display: flex;
    align-items: center;
    position: relative;
    background: linear-gradient(135deg, var(--nk-primary) 0%, var(--nk-secondary) 100%);
    color: #fff;
    overflow: hidden;
}

.nk-hero--bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nk-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1;
}

.nk-hero .container,
.nk-hero__content {
    position: relative;
    z-index: 2;
}

.nk-hero__heading {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.nk-hero__sub {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255,255,255,.9);
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.nk-hero__btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================================
   スタッフカード
   ============================================================ */
.nk-staff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nk-space-lg);
}
.nk-staff-card {
    background: #fff;
    border-radius: var(--nk-radius-md);
    overflow: hidden;
    box-shadow: var(--nk-shadow-sm);
    text-align: center;
    transition: var(--nk-transition-slow);
}
.nk-staff-card:hover { transform: translateY(-4px); box-shadow: var(--nk-shadow-md); }
.nk-staff-card__img { margin: 0; }
.nk-staff-card__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.nk-staff-card__body { padding: 1.5rem; }
.nk-staff-card__role { font-size: 0.8rem; color: var(--nk-primary); font-weight: 600; margin-bottom: .25rem; }
.nk-staff-card__name { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }
.nk-staff-card__desc { font-size: 0.875rem; color: var(--nk-text-muted); }

@media (max-width: 768px) {
    .nk-staff-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .nk-staff-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   お客様の声カード
   ============================================================ */
.nk-voice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nk-space-lg);
}
.nk-voice-card {
    background: #fff;
    border-radius: var(--nk-radius-md);
    box-shadow: var(--nk-shadow-sm);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.nk-voice-card__stars { margin-bottom: .75rem; color: var(--nk-accent); letter-spacing: 2px; }
.nk-star.is-filled  { color: var(--nk-accent); }
.nk-star:not(.is-filled) { color: var(--nk-border); }
.nk-voice-card__text {
    font-size: 0.9375rem;
    line-height: 1.8;
    border: none;
    padding: 0;
    margin: 0 0 1rem;
    flex: 1;
}
.nk-voice-card__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--nk-border);
}
.nk-voice-card__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin: 0; }
.nk-voice-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nk-voice-card__name { font-weight: 700; font-size: 0.9rem; margin: 0 0 .1rem; }
.nk-voice-card__attr { font-size: 0.8rem; color: var(--nk-text-muted); margin: 0; }

@media (max-width: 768px) {
    .nk-voice-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .nk-voice-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   フロー（申込の流れ）
   ============================================================ */
.nk-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    counter-reset: flow-counter;
}

.nk-flow__step {
    flex: 1;
    padding: 2rem 1.5rem;
    background: var(--nk-bg-light);
    position: relative;
    text-align: center;
}
.nk-flow__step + .nk-flow__step { margin-left: 1px; }

.nk-flow__step::after {
    content: '';
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    border: 1rem solid transparent;
    border-left-color: var(--nk-bg-light);
    z-index: 1;
}
.nk-flow__step:last-child::after { display: none; }

.nk-flow__num {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--nk-primary);
    font-family: var(--nk-font-en);
    line-height: 1;
    margin-bottom: 1rem;
}

/* ============================================================
   追従 CTA（画面下部）
   ============================================================ */
.nk-floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--nk-z-floating);
    background: var(--nk-bg-dark);
    padding: .75rem 1rem;
    box-shadow: 0 -2px 12px rgba(0,0,0,.15);
    transform: translateY(100%);
    transition: transform .3s ease;
}
.nk-floating-cta.is-visible {
    transform: translateY(0);
}
.nk-floating-cta__inner {
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 500px;
    margin-inline: auto;
}
.nk-floating-cta__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .5rem;
    border-radius: var(--nk-radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8125rem;
    transition: var(--nk-transition);
}
.nk-floating-cta__btn--tel {
    background: var(--nk-accent);
    color: #fff;
}
.nk-floating-cta__btn--contact {
    background: var(--nk-primary);
    color: #fff;
}
.nk-floating-cta__icon { font-size: 1.25rem; line-height: 1; }

/* ============================================================
   カテゴリフィルター
   ============================================================ */
.nk-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}
.nk-filter-btn {
    display: inline-block;
    padding: .4rem 1.25rem;
    border-radius: var(--nk-radius-full);
    border: 1px solid var(--nk-border);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--nk-text);
    transition: var(--nk-transition);
}
.nk-filter-btn:hover,
.nk-filter-btn.is-active {
    background: var(--nk-primary);
    color: #fff;
    border-color: var(--nk-primary);
}

/* ============================================================
   ページネーション
   ============================================================ */
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: var(--nk-space-xl);
}

.nav-links a,
.nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .75rem;
    border-radius: var(--nk-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--nk-border);
    color: var(--nk-text);
    transition: var(--nk-transition);
}
.nav-links a:hover { background: var(--nk-primary); color: #fff; border-color: var(--nk-primary); }
.nav-links .current { background: var(--nk-primary); color: #fff; border-color: var(--nk-primary); }

/* ============================================================
   404ページ
   ============================================================ */
.nk-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: var(--nk-space-3xl) 0;
}
.nk-404__code {
    font-size: clamp(6rem, 15vw, 12rem);
    font-weight: 700;
    color: var(--nk-border);
    line-height: 1;
    margin-bottom: 0;
    font-family: var(--nk-font-en);
}
.nk-404__heading { font-size: 1.5rem; margin-bottom: 1rem; }
.nk-404__text { color: var(--nk-text-muted); margin-bottom: 2rem; }
.nk-404__actions { margin-bottom: 2rem; }
.nk-404__search { max-width: 400px; margin-inline: auto; }

/* ============================================================
   シェアボタン
   ============================================================ */
.nk-share-buttons {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--nk-border);
}
.nk-share-buttons__label { font-size: 0.875rem; font-weight: 600; margin-bottom: .75rem; }
.nk-share-buttons__list { display: flex; gap: .5rem; list-style: none; padding: 0; }
.nk-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: .4rem 1rem;
    border-radius: var(--nk-radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--nk-transition);
}
.nk-share-btn--x    { background: #000; color: #fff; }
.nk-share-btn--fb   { background: #1877f2; color: #fff; }
.nk-share-btn--line { background: #06c755; color: #fff; }
.nk-share-btn:hover { opacity: .85; transform: translateY(-1px); }

/* ============================================================
   関連投稿
   ============================================================ */
.nk-related-posts {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--nk-border);
}
.nk-related-posts__heading { font-size: 1.25rem; margin-bottom: 1.5rem; }
.nk-related-posts__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.nk-related-posts__item { }
.nk-related-posts__link {
    display: block;
    text-decoration: none;
    color: var(--nk-text);
}
.nk-related-posts__thumb {
    aspect-ratio: 3/2;
    overflow: hidden;
    border-radius: var(--nk-radius-sm);
    margin-bottom: .5rem;
}
.nk-related-posts__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.nk-related-posts__link:hover img { transform: scale(1.05); }
.nk-related-posts__title { font-size: 0.875rem; line-height: 1.4; font-weight: 600; }
.nk-related-posts__date { font-size: 0.75rem; color: var(--nk-text-muted); margin-top: .25rem; display: block; }

@media (max-width: 768px) {
    .nk-related-posts__grid { grid-template-columns: repeat(2, 1fr); }
}