@charset "utf-8";

/* ------------------------------------------------------------
 * CSS変数（カスタムプロパティ）
 * ------------------------------------------------------------*/
:root {
    /* Tailwind CSS ベースの色システム */
    --wb-color-green-50: #f0fdf4;
    --wb-color-green-100: #dcfce7;
    --wb-color-green-600: #16a34a;
    --wb-color-blue-50: #eff6ff;
    --wb-color-blue-100: #dbeafe;
    --wb-color-blue-600: #2563eb;
    --wb-color-red-50: #fef2f2;
    --wb-color-red-100: #fee2e2;
    --wb-color-red-600: #dc2626;
    --wb-color-yellow-50: #fffbeb;
    --wb-color-yellow-100: #fef3c7;
    --wb-color-yellow-600: #d97706;
    --wb-color-purple-50: #faf5ff;
    --wb-color-purple-100: #f3e8ff;
    --wb-color-purple-600: #9333ea;
    --wb-color-gray-50: #f9fafb;
    --wb-color-gray-100: #f3f4f6;
    --wb-color-gray-600: #4b5563;
    --wb-color-gray-700: #374151;
    --wb-color-gray-900: #111827;
    --wb-color-white: #ffffff;
    
    /* グラデーション用の色 */
    --wb-color-cyan-500: #06b6d4;
    --wb-color-blue-500: #3b82f6;
    --wb-color-green-600: #16a34a;
    --wb-color-sky-600: #0284c7;
    --wb-color-indigo-600: #4f46e5;
    --wb-color-purple-600: #9333ea;
    --wb-color-pink-600: #db2777;
    
    /* 透明度変数 */
    --wb-opacity-0: 0;
    --wb-opacity-5: 0.05;
    --wb-opacity-10: 0.1;
    --wb-opacity-20: 0.2;
    --wb-opacity-25: 0.25;
    --wb-opacity-30: 0.3;
    --wb-opacity-40: 0.4;
    --wb-opacity-50: 0.5;
    --wb-opacity-60: 0.6;
    --wb-opacity-70: 0.7;
    --wb-opacity-75: 0.75;
    --wb-opacity-80: 0.8;
    --wb-opacity-90: 0.9;
    --wb-opacity-95: 0.95;
    --wb-opacity-100: 1;
    
    /* その他の色 */
    --wb-color-border: #E5E7EB;
    
    /* コンテナサイズ変数 */
    --container-3xs: 16rem; /* 256px */
    --container-2xs: 18rem; /* 288px */
    --container-xs: 20rem; /* 320px */
    --container-sm: 24rem; /* 384px */
    --container-md: 28rem; /* 448px */
    --container-lg: 32rem; /* 512px */
    --container-xl: 36rem; /* 576px */
    --container-2xl: 42rem; /* 672px */
    --container-3xl: 48rem; /* 768px */
    --container-4xl: 56rem; /* 896px */
    --container-5xl: 64rem; /* 1024px */
    --container-6xl: 72rem; /* 1152px */
    --container-7xl: 80rem; /* 1280px */
}

/* ------------------------------------------------------------
 * 投稿リスト
 * ------------------------------------------------------------*/

/* 最初の3件だけ非表示 */
.wb-posts-offset-3 .p-postList .p-postList__item:nth-child(-n+3) {
    display: none !important;
}

/* ------------------------------------------------------------
 * テーブル
 * ------------------------------------------------------------*/

 /* ボーダーなし */
.wb-table-no-border table th, .wb-table-no-border table td {
    border: none;
}

/* ------------------------------------------------------------
 * カード
 * ------------------------------------------------------------*/
.wb-card {
    border-radius: 1rem;
    border: 1px solid var(--wb-color-border);
    padding: 2rem !important;
    background-color: var(--wb-color-white);
}
.wb-card .wb-card-title {
    margin: 1.5rem auto 0.5rem;
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.wb-card .wb-card-subtitle {
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.wb-card .wb-card-content {
    font-size: 1rem;
    line-height: 1.5rem;
}
.wb-card .wb-card-footer {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* ------------------------------------------------------------
 * SVGアイコン
 * ------------------------------------------------------------*/

/* 基本的なアイコンコンテナ */
.wb-svg-icon {
    display: inline-block;
    vertical-align: middle;
    /* インラインスタイルでサイズが指定されるため、ここでのサイズ指定は最小値として機能 */
}

/* アイコンのサイズ調整 */
.wb-svg-icon svg {
    vertical-align: middle;
    /* widthとheightはショートコードで動的に設定される */
}

/* タイプ別のスタイル */
.wb-svg-icon-circle {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
}

.wb-svg-icon-default {
    /* デフォルトスタイル */
}

/* カラー別のスタイル */
.wb-svg-icon-green {
    background: var(--wb-color-green-100) !important;
    color: var(--wb-color-green-600) !important;
}

.wb-svg-icon-blue {
    background: var(--wb-color-blue-100) !important;
    color: var(--wb-color-blue-600) !important;
}

.wb-svg-icon-red {
    background: var(--wb-color-red-100) !important;
    color: var(--wb-color-red-600) !important;
}

.wb-svg-icon-yellow {
    background: var(--wb-color-yellow-100) !important;
    color: var(--wb-color-yellow-600) !important;
}

.wb-svg-icon-purple {
    background: var(--wb-color-purple-100) !important;
    color: var(--wb-color-purple-600) !important;
}

.wb-svg-icon-gray {
    background: var(--wb-color-gray-100) !important;
    color: var(--wb-color-gray-600) !important;
}

.wb-svg-icon-black {
    background: var(--wb-color-gray-50) !important;
    color: var(--wb-color-gray-900) !important;
}

.wb-svg-icon-white {
    background: var(--wb-color-white) !important;
    color: var(--wb-color-gray-700) !important;
}

/* ------------------------------------------------------------
 * テキストカラー
 * ------------------------------------------------------------*/
.wb-text-green-50 {
    color: var(--wb-color-green-50) !important;
}

.wb-text-green {
    color: var(--wb-color-green-600) !important;
}

.wb-text-blue-50 {
    color: var(--wb-color-blue-50) !important;
}

.wb-text-blue {
    color: var(--wb-color-blue-600) !important;
}

.wb-text-red-50 {
    color: var(--wb-color-red-50) !important;
}

.wb-text-red {
    color: var(--wb-color-red-600) !important;
}

.wb-text-yellow-50 {
    color: var(--wb-color-yellow-50) !important;
}

.wb-text-yellow {
    color: var(--wb-color-yellow-600) !important;
}

.wb-text-purple-50 {
    color: var(--wb-color-purple-50) !important;
}

.wb-text-purple {
    color: var(--wb-color-purple-600) !important;
}

.wb-text-gray-50 {
    color: var(--wb-color-gray-50) !important;
}

.wb-text-gray {
    color: var(--wb-color-gray-600) !important;
}

.wb-text-black {
    color: var(--wb-color-gray-900) !important;
}

.wb-text-white {
    color: var(--wb-color-white) !important;
}

/* 薄い色のテキスト */
.wb-text-green-light {
    color: var(--wb-color-green-100) !important;
}

.wb-text-blue-light {
    color: var(--wb-color-blue-100) !important;
}

.wb-text-red-light {
    color: var(--wb-color-red-100) !important;
}

.wb-text-yellow-light {
    color: var(--wb-color-yellow-100) !important;
}

.wb-text-purple-light {
    color: var(--wb-color-purple-100) !important;
}

.wb-text-gray-light {
    color: var(--wb-color-gray-100) !important;
}

/* ------------------------------------------------------------
 * 背景色
 * ------------------------------------------------------------*/
.wb-bg-green-50 {
    background-color: var(--wb-color-green-50) !important;
}

.wb-bg-green {
    background-color: var(--wb-color-green-100) !important;
}

.wb-bg-blue-50 {
    background-color: var(--wb-color-blue-50) !important;
}

.wb-bg-blue {
    background-color: var(--wb-color-blue-100) !important;
}

.wb-bg-red-50 {
    background-color: var(--wb-color-red-50) !important;
}

.wb-bg-red {
    background-color: var(--wb-color-red-100) !important;
}

.wb-bg-yellow-50 {
    background-color: var(--wb-color-yellow-50) !important;
}

.wb-bg-yellow {
    background-color: var(--wb-color-yellow-100) !important;
}

.wb-bg-purple-50 {
    background-color: var(--wb-color-purple-50) !important;
}

.wb-bg-purple {
    background-color: var(--wb-color-purple-100) !important;
}

.wb-bg-gray-50 {
    background-color: var(--wb-color-gray-50) !important;
}

.wb-bg-gray {
    background-color: var(--wb-color-gray-100) !important;
}

.wb-bg-black {
    background-color: var(--wb-color-gray-900) !important;
}

.wb-bg-white {
    background-color: var(--wb-color-white) !important;
}

/* ------------------------------------------------------------
 * 背景色透明度
 * ------------------------------------------------------------*/
/* 緑色系の透明度 */
.wb-bg-green-50\/0 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-0)) !important;
}

.wb-bg-green-50\/5 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-5)) !important;
}

.wb-bg-green-50\/10 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-10)) !important;
}

.wb-bg-green-50\/20 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-20)) !important;
}

.wb-bg-green-50\/25 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-25)) !important;
}

.wb-bg-green-50\/30 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-30)) !important;
}

.wb-bg-green-50\/40 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-40)) !important;
}

.wb-bg-green-50\/50 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-50)) !important;
}

.wb-bg-green-50\/60 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-60)) !important;
}

.wb-bg-green-50\/70 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-70)) !important;
}

.wb-bg-green-50\/75 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-75)) !important;
}

.wb-bg-green-50\/80 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-80)) !important;
}

.wb-bg-green-50\/90 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-90)) !important;
}

.wb-bg-green-50\/95 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-95)) !important;
}

.wb-bg-green-50\/100 {
    background-color: rgba(240, 253, 244, var(--wb-opacity-100)) !important;
}

/* 青色系の透明度 */
.wb-bg-blue-50\/0 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-0)) !important;
}

.wb-bg-blue-50\/5 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-5)) !important;
}

.wb-bg-blue-50\/10 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-10)) !important;
}

.wb-bg-blue-50\/20 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-20)) !important;
}

.wb-bg-blue-50\/25 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-25)) !important;
}

.wb-bg-blue-50\/30 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-30)) !important;
}

.wb-bg-blue-50\/40 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-40)) !important;
}

.wb-bg-blue-50\/50 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-50)) !important;
}

.wb-bg-blue-50\/60 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-60)) !important;
}

.wb-bg-blue-50\/70 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-70)) !important;
}

.wb-bg-blue-50\/75 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-75)) !important;
}

.wb-bg-blue-50\/80 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-80)) !important;
}

.wb-bg-blue-50\/90 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-90)) !important;
}

.wb-bg-blue-50\/95 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-95)) !important;
}

.wb-bg-blue-50\/100 {
    background-color: rgba(239, 246, 255, var(--wb-opacity-100)) !important;
}

/* メインカラーの透明度 */
.wb-bg-green\/0 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-0)) !important;
}

.wb-bg-green\/5 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-5)) !important;
}

.wb-bg-green\/10 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-10)) !important;
}

.wb-bg-green\/20 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-20)) !important;
}

.wb-bg-green\/25 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-25)) !important;
}

.wb-bg-green\/30 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-30)) !important;
}

.wb-bg-green\/40 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-40)) !important;
}

.wb-bg-green\/50 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-50)) !important;
}

.wb-bg-green\/60 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-60)) !important;
}

.wb-bg-green\/70 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-70)) !important;
}

.wb-bg-green\/75 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-75)) !important;
}

.wb-bg-green\/80 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-80)) !important;
}

.wb-bg-green\/90 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-90)) !important;
}

.wb-bg-green\/95 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-95)) !important;
}

.wb-bg-green\/100 {
    background-color: rgba(22, 163, 74, var(--wb-opacity-100)) !important;
}

.wb-bg-blue\/0 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-0)) !important;
}

.wb-bg-blue\/5 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-5)) !important;
}

.wb-bg-blue\/10 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-10)) !important;
}

.wb-bg-blue\/20 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-20)) !important;
}

.wb-bg-blue\/25 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-25)) !important;
}

.wb-bg-blue\/30 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-30)) !important;
}

.wb-bg-blue\/40 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-40)) !important;
}

.wb-bg-blue\/50 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-50)) !important;
}

.wb-bg-blue\/60 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-60)) !important;
}

.wb-bg-blue\/70 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-70)) !important;
}

.wb-bg-blue\/75 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-75)) !important;
}

.wb-bg-blue\/80 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-80)) !important;
}

.wb-bg-blue\/90 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-90)) !important;
}

.wb-bg-blue\/95 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-95)) !important;
}

.wb-bg-blue\/100 {
    background-color: rgba(37, 99, 235, var(--wb-opacity-100)) !important;
}

/* 濃い背景色 */
.wb-bg-green-dark {
    background-color: var(--wb-color-green-600) !important;
}

.wb-bg-blue-dark {
    background-color: var(--wb-color-blue-600) !important;
}

.wb-bg-red-dark {
    background-color: var(--wb-color-red-600) !important;
}

.wb-bg-yellow-dark {
    background-color: var(--wb-color-yellow-600) !important;
}

.wb-bg-purple-dark {
    background-color: var(--wb-color-purple-600) !important;
}

.wb-bg-gray-dark {
    background-color: var(--wb-color-gray-600) !important;
}

/* ------------------------------------------------------------
 * テキストサイズ
 * ------------------------------------------------------------*/
.wb-text-xs {
    font-size: 0.75rem !important; /* 12px */
}

.wb-text-sm {
    font-size: 0.875rem !important; /* 14px */
}

.wb-text-base {
    font-size: 1rem !important; /* 16px */
}

.wb-text-lg {
    font-size: 1.125rem !important; /* 18px */
}

.wb-text-xl {
    font-size: 1.25rem !important; /* 20px */
}

.wb-text-2xl {
    font-size: 1.5rem !important; /* 24px */
}

.wb-text-3xl {
    font-size: 1.875rem !important; /* 30px */
}

.wb-text-4xl {
    font-size: 2.25rem !important; /* 36px */
}

.wb-text-5xl {
    font-size: 3rem !important; /* 48px */
}

.wb-text-6xl {
    font-size: 3.75rem !important; /* 60px */
}

/* レスポンシブテキストサイズ（Tailwind CSS準拠） */
/* タブレット（md: 768px以上） */
@media (min-width: 768px) {
    .wb-md\:text-xs {
        font-size: 0.75rem !important; /* 12px */
    }
    
    .wb-md\:text-sm {
        font-size: 0.875rem !important; /* 14px */
    }
    
    .wb-md\:text-base {
        font-size: 1rem !important; /* 16px */
    }
    
    .wb-md\:text-lg {
        font-size: 1.125rem !important; /* 18px */
    }
    
    .wb-md\:text-xl {
        font-size: 1.25rem !important; /* 20px */
    }
    
    .wb-md\:text-2xl {
        font-size: 1.5rem !important; /* 24px */
    }
    
    .wb-md\:text-3xl {
        font-size: 1.875rem !important; /* 30px */
    }
    
    .wb-md\:text-4xl {
        font-size: 2.25rem !important; /* 36px */
    }
    
    .wb-md\:text-5xl {
        font-size: 3rem !important; /* 48px */
    }
    
    .wb-md\:text-6xl {
        font-size: 3.75rem !important; /* 60px */
    }
}

/* デスクトップ（lg: 1024px以上） */
@media (min-width: 1024px) {
    .wb-lg\:text-xs {
        font-size: 0.75rem !important; /* 12px */
    }
    
    .wb-lg\:text-sm {
        font-size: 0.875rem !important; /* 14px */
    }
    
    .wb-lg\:text-base {
        font-size: 1rem !important; /* 16px */
    }
    
    .wb-lg\:text-lg {
        font-size: 1.125rem !important; /* 18px */
    }
    
    .wb-lg\:text-xl {
        font-size: 1.25rem !important; /* 20px */
    }
    
    .wb-lg\:text-2xl {
        font-size: 1.5rem !important; /* 24px */
    }
    
    .wb-lg\:text-3xl {
        font-size: 1.875rem !important; /* 30px */
    }
    
    .wb-lg\:text-4xl {
        font-size: 2.25rem !important; /* 36px */
    }
    
    .wb-lg\:text-5xl {
        font-size: 3rem !important; /* 48px */
    }
    
    .wb-lg\:text-6xl {
        font-size: 3.75rem !important; /* 60px */
    }
}

/* 大画面（xl: 1280px以上） */
@media (min-width: 1280px) {
    .wb-xl\:text-xs {
        font-size: 0.75rem !important; /* 12px */
    }
    
    .wb-xl\:text-sm {
        font-size: 0.875rem !important; /* 14px */
    }
    
    .wb-xl\:text-base {
        font-size: 1rem !important; /* 16px */
    }
    
    .wb-xl\:text-lg {
        font-size: 1.125rem !important; /* 18px */
    }
    
    .wb-xl\:text-xl {
        font-size: 1.25rem !important; /* 20px */
    }
    
    .wb-xl\:text-2xl {
        font-size: 1.5rem !important; /* 24px */
    }
    
    .wb-xl\:text-3xl {
        font-size: 1.875rem !important; /* 30px */
    }
    
    .wb-xl\:text-4xl {
        font-size: 2.25rem !important; /* 36px */
    }
    
    .wb-xl\:text-5xl {
        font-size: 3rem !important; /* 48px */
    }
    
    .wb-xl\:text-6xl {
        font-size: 3.75rem !important; /* 60px */
    }
}

/* ------------------------------------------------------------
 * フォントウェイト
 * ------------------------------------------------------------*/
.wb-font-thin {
    font-weight: 100 !important;
}

.wb-font-extralight {
    font-weight: 200 !important;
}

.wb-font-light {
    font-weight: 300 !important;
}

.wb-font-normal {
    font-weight: 400 !important;
}

.wb-font-medium {
    font-weight: 500 !important;
}

.wb-font-semibold {
    font-weight: 600 !important;
}

.wb-font-bold {
    font-weight: 700 !important;
}

.wb-font-extrabold {
    font-weight: 800 !important;
}

.wb-font-black {
    font-weight: 900 !important;
}

/* ------------------------------------------------------------
 * シャドウ
 * ------------------------------------------------------------*/
.wb-shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.wb-shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
}

.wb-shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

.wb-shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

.wb-shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

.wb-shadow-2xl {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}

.wb-shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05) !important;
}

.wb-shadow-none {
    box-shadow: 0 0 #0000 !important;
}

/* ------------------------------------------------------------
 * ホバーエフェクト
 * ------------------------------------------------------------*/
.wb-hover-lift {
    transition: transform 0.2s ease-in-out !important;
}

.wb-hover-lift:hover {
    transform: translateY(-0.5rem) !important;
}

/* シャドウ付きホバーエフェクト */
.wb-hover-lift-shadow {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.wb-hover-lift-shadow:hover {
    transform: translateY(-0.5rem) !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

/* カード風ホバーエフェクト */
.wb-hover-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
    cursor: pointer;
}

.wb-hover-card:hover {
    transform: translateY(-0.5rem) !important;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}

/* ------------------------------------------------------------
 * ボーダー
 * ------------------------------------------------------------*/
/* ボーダー幅 */
.wb-border-0 {
    border-width: 0px !important;
}

.wb-border {
    border-width: 1px !important;
}

.wb-border-2 {
    border-width: 2px !important;
}

.wb-border-4 {
    border-width: 4px !important;
}

.wb-border-8 {
    border-width: 8px !important;
}

/* ボーダースタイル */
.wb-border-solid {
    border-style: solid !important;
}

.wb-border-dashed {
    border-style: dashed !important;
}

.wb-border-dotted {
    border-style: dotted !important;
}

.wb-border-double {
    border-style: double !important;
}

.wb-border-none {
    border-style: none !important;
}

/* ボーダー色 */
.wb-border-green {
    border-color: var(--wb-color-green-600) !important;
}

.wb-border-blue {
    border-color: var(--wb-color-blue-600) !important;
}

.wb-border-red {
    border-color: var(--wb-color-red-600) !important;
}

.wb-border-yellow {
    border-color: var(--wb-color-yellow-600) !important;
}

.wb-border-purple {
    border-color: var(--wb-color-purple-600) !important;
}

.wb-border-gray {
    border-color: var(--wb-color-gray-600) !important;
}

.wb-border-black {
    border-color: var(--wb-color-gray-900) !important;
}

.wb-border-white {
    border-color: var(--wb-color-white) !important;
}

/* 薄いボーダー色 */
.wb-border-green-light {
    border-color: var(--wb-color-green-100) !important;
}

.wb-border-blue-light {
    border-color: var(--wb-color-blue-100) !important;
}

.wb-border-red-light {
    border-color: var(--wb-color-red-100) !important;
}

.wb-border-yellow-light {
    border-color: var(--wb-color-yellow-100) !important;
}

.wb-border-purple-light {
    border-color: var(--wb-color-purple-100) !important;
}

.wb-border-gray-light {
    border-color: var(--wb-color-gray-100) !important;
}

/* ボーダー方向 */
.wb-border-t {
    border-top-width: 1px !important;
}

.wb-border-r {
    border-right-width: 1px !important;
}

.wb-border-b {
    border-bottom-width: 1px !important;
}

.wb-border-l {
    border-left-width: 1px !important;
}

/* ボーダー角丸 */
.wb-rounded-none {
    border-radius: 0px !important;
}

.wb-rounded-sm {
    border-radius: 0.125rem !important; /* 2px */
}

.wb-rounded {
    border-radius: 0.25rem !important; /* 4px */
}

.wb-rounded-md {
    border-radius: 0.375rem !important; /* 6px */
}

.wb-rounded-lg {
    border-radius: 0.5rem !important; /* 8px */
}

.wb-rounded-xl {
    border-radius: 0.75rem !important; /* 12px */
}

.wb-rounded-2xl {
    border-radius: 1rem !important; /* 16px */
}

.wb-rounded-3xl {
    border-radius: 1.5rem !important; /* 24px */
}

.wb-rounded-full {
    border-radius: 9999px !important;
}

/* より細かい角丸設定 */
.wb-rounded-0 {
    border-radius: 0px !important;
}

.wb-rounded-1 {
    border-radius: 0.0625rem !important; /* 1px */
}

.wb-rounded-2 {
    border-radius: 0.125rem !important; /* 2px */
}

.wb-rounded-3 {
    border-radius: 0.1875rem !important; /* 3px */
}

.wb-rounded-5 {
    border-radius: 0.3125rem !important; /* 5px */
}

.wb-rounded-7 {
    border-radius: 0.4375rem !important; /* 7px */
}

.wb-rounded-9 {
    border-radius: 0.5625rem !important; /* 9px */
}

.wb-rounded-10 {
    border-radius: 0.625rem !important; /* 10px */
}

.wb-rounded-11 {
    border-radius: 0.6875rem !important; /* 11px */
}

.wb-rounded-13 {
    border-radius: 0.8125rem !important; /* 13px */
}

.wb-rounded-14 {
    border-radius: 0.875rem !important; /* 14px */
}

.wb-rounded-15 {
    border-radius: 0.9375rem !important; /* 15px */
}

.wb-rounded-16 {
    border-radius: 1rem !important; /* 16px */
}

.wb-rounded-20 {
    border-radius: 1.25rem !important; /* 20px */
}

.wb-rounded-24 {
    border-radius: 1.5rem !important; /* 24px */
}

.wb-rounded-28 {
    border-radius: 1.75rem !important; /* 28px */
}

.wb-rounded-32 {
    border-radius: 2rem !important; /* 32px */
}

.wb-rounded-36 {
    border-radius: 2.25rem !important; /* 36px */
}

.wb-rounded-40 {
    border-radius: 2.5rem !important; /* 40px */
}

.wb-rounded-44 {
    border-radius: 2.75rem !important; /* 44px */
}

.wb-rounded-48 {
    border-radius: 3rem !important; /* 48px */
}

.wb-rounded-52 {
    border-radius: 3.25rem !important; /* 52px */
}

.wb-rounded-56 {
    border-radius: 3.5rem !important; /* 56px */
}

.wb-rounded-60 {
    border-radius: 3.75rem !important; /* 60px */
}

.wb-rounded-64 {
    border-radius: 4rem !important; /* 64px */
}

.wb-rounded-72 {
    border-radius: 4.5rem !important; /* 72px */
}

.wb-rounded-80 {
    border-radius: 5rem !important; /* 80px */
}

.wb-rounded-96 {
    border-radius: 6rem !important; /* 96px */
}

/* 個別の角の角丸設定 */
.wb-rounded-t-none {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.wb-rounded-t-sm {
    border-top-left-radius: 0.125rem !important;
    border-top-right-radius: 0.125rem !important;
}

.wb-rounded-t {
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

.wb-rounded-t-md {
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
}

.wb-rounded-t-lg {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

.wb-rounded-t-xl {
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
}

.wb-rounded-t-2xl {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

.wb-rounded-t-3xl {
    border-top-left-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
}

.wb-rounded-t-full {
    border-top-left-radius: 9999px !important;
    border-top-right-radius: 9999px !important;
}

.wb-rounded-r-none {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.wb-rounded-r-sm {
    border-top-right-radius: 0.125rem !important;
    border-bottom-right-radius: 0.125rem !important;
}

.wb-rounded-r {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

.wb-rounded-r-md {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

.wb-rounded-r-lg {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

.wb-rounded-r-xl {
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

.wb-rounded-r-2xl {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.wb-rounded-r-3xl {
    border-top-right-radius: 1.5rem !important;
    border-bottom-right-radius: 1.5rem !important;
}

.wb-rounded-r-full {
    border-top-right-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
}

.wb-rounded-b-none {
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.wb-rounded-b-sm {
    border-bottom-right-radius: 0.125rem !important;
    border-bottom-left-radius: 0.125rem !important;
}

.wb-rounded-b {
    border-bottom-right-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.wb-rounded-b-md {
    border-bottom-right-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

.wb-rounded-b-lg {
    border-bottom-right-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

.wb-rounded-b-xl {
    border-bottom-right-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

.wb-rounded-b-2xl {
    border-bottom-right-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}

.wb-rounded-b-3xl {
    border-bottom-right-radius: 1.5rem !important;
    border-bottom-left-radius: 1.5rem !important;
}

.wb-rounded-b-full {
    border-bottom-right-radius: 9999px !important;
    border-bottom-left-radius: 9999px !important;
}

.wb-rounded-l-none {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.wb-rounded-l-sm {
    border-top-left-radius: 0.125rem !important;
    border-bottom-left-radius: 0.125rem !important;
}

.wb-rounded-l {
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.wb-rounded-l-md {
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

.wb-rounded-l-lg {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

.wb-rounded-l-xl {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

.wb-rounded-l-2xl {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}

.wb-rounded-l-3xl {
    border-top-left-radius: 1.5rem !important;
    border-bottom-left-radius: 1.5rem !important;
}

.wb-rounded-l-full {
    border-top-left-radius: 9999px !important;
    border-bottom-left-radius: 9999px !important;
}

/* 個別の角の角丸設定 */
.wb-rounded-tl-none {
    border-top-left-radius: 0px !important;
}

.wb-rounded-tl-sm {
    border-top-left-radius: 0.125rem !important;
}

.wb-rounded-tl {
    border-top-left-radius: 0.25rem !important;
}

.wb-rounded-tl-md {
    border-top-left-radius: 0.375rem !important;
}

.wb-rounded-tl-lg {
    border-top-left-radius: 0.5rem !important;
}

.wb-rounded-tl-xl {
    border-top-left-radius: 0.75rem !important;
}

.wb-rounded-tl-2xl {
    border-top-left-radius: 1rem !important;
}

.wb-rounded-tl-3xl {
    border-top-left-radius: 1.5rem !important;
}

.wb-rounded-tl-full {
    border-top-left-radius: 9999px !important;
}

.wb-rounded-tr-none {
    border-top-right-radius: 0px !important;
}

.wb-rounded-tr-sm {
    border-top-right-radius: 0.125rem !important;
}

.wb-rounded-tr {
    border-top-right-radius: 0.25rem !important;
}

.wb-rounded-tr-md {
    border-top-right-radius: 0.375rem !important;
}

.wb-rounded-tr-lg {
    border-top-right-radius: 0.5rem !important;
}

.wb-rounded-tr-xl {
    border-top-right-radius: 0.75rem !important;
}

.wb-rounded-tr-2xl {
    border-top-right-radius: 1rem !important;
}

.wb-rounded-tr-3xl {
    border-top-right-radius: 1.5rem !important;
}

.wb-rounded-tr-full {
    border-top-right-radius: 9999px !important;
}

.wb-rounded-br-none {
    border-bottom-right-radius: 0px !important;
}

.wb-rounded-br-sm {
    border-bottom-right-radius: 0.125rem !important;
}

.wb-rounded-br {
    border-bottom-right-radius: 0.25rem !important;
}

.wb-rounded-br-md {
    border-bottom-right-radius: 0.375rem !important;
}

.wb-rounded-br-lg {
    border-bottom-right-radius: 0.5rem !important;
}

.wb-rounded-br-xl {
    border-bottom-right-radius: 0.75rem !important;
}

.wb-rounded-br-2xl {
    border-bottom-right-radius: 1rem !important;
}

.wb-rounded-br-3xl {
    border-bottom-right-radius: 1.5rem !important;
}

.wb-rounded-br-full {
    border-bottom-right-radius: 9999px !important;
}

.wb-rounded-bl-none {
    border-bottom-left-radius: 0px !important;
}

.wb-rounded-bl-sm {
    border-bottom-left-radius: 0.125rem !important;
}

.wb-rounded-bl {
    border-bottom-left-radius: 0.25rem !important;
}

.wb-rounded-bl-md {
    border-bottom-left-radius: 0.375rem !important;
}

.wb-rounded-bl-lg {
    border-bottom-left-radius: 0.5rem !important;
}

.wb-rounded-bl-xl {
    border-bottom-left-radius: 0.75rem !important;
}

.wb-rounded-bl-2xl {
    border-bottom-left-radius: 1rem !important;
}

.wb-rounded-bl-3xl {
    border-bottom-left-radius: 1.5rem !important;
}

.wb-rounded-bl-full {
    border-bottom-left-radius: 9999px !important;
}

/* ------------------------------------------------------------
 * マージン
 * ------------------------------------------------------------*/
/* 全方向マージン */
.wb-m-0 {
    margin: 0px !important;
}

.wb-m-1 {
    margin: 0.25rem !important; /* 4px */
}

.wb-m-2 {
    margin: 0.5rem !important; /* 8px */
}

.wb-m-3 {
    margin: 0.75rem !important; /* 12px */
}

.wb-m-4 {
    margin: 1rem !important; /* 16px */
}

.wb-m-5 {
    margin: 1.25rem !important; /* 20px */
}

.wb-m-6 {
    margin: 1.5rem !important; /* 24px */
}

.wb-m-7 {
    margin: 1.75rem !important; /* 28px */
}

.wb-m-8 {
    margin: 2rem !important; /* 32px */
}

.wb-m-9 {
    margin: 2.25rem !important; /* 36px */
}

.wb-m-10 {
    margin: 2.5rem !important; /* 40px */
}

.wb-m-11 {
    margin: 2.75rem !important; /* 44px */
}

.wb-m-12 {
    margin: 3rem !important; /* 48px */
}

.wb-m-13 {
    margin: 3.25rem !important; /* 52px */
}

.wb-m-14 {
    margin: 3.5rem !important; /* 56px */
}

.wb-m-15 {
    margin: 3.75rem !important; /* 60px */
}

.wb-m-16 {
    margin: 4rem !important; /* 64px */
}

.wb-m-20 {
    margin: 5rem !important; /* 80px */
}

.wb-m-24 {
    margin: 6rem !important; /* 96px */
}

.wb-m-32 {
    margin: 8rem !important; /* 128px */
}

.wb-m-40 {
    margin: 10rem !important; /* 160px */
}

.wb-m-48 {
    margin: 12rem !important; /* 192px */
}

.wb-m-56 {
    margin: 14rem !important; /* 224px */
}

.wb-m-64 {
    margin: 16rem !important; /* 256px */
}

.wb-m-auto {
    margin: auto !important;
}

/* 方向別マージン */
/* 上部マージン */
.wb-mt-0 { margin-top: 0px !important; }
.wb-mt-1 { margin-top: 0.25rem !important; }
.wb-mt-2 { margin-top: 0.5rem !important; }
.wb-mt-3 { margin-top: 0.75rem !important; }
.wb-mt-4 { margin-top: 1rem !important; }
.wb-mt-5 { margin-top: 1.25rem !important; }
.wb-mt-6 { margin-top: 1.5rem !important; }
.wb-mt-7 { margin-top: 1.75rem !important; }
.wb-mt-8 { margin-top: 2rem !important; }
.wb-mt-9 { margin-top: 2.25rem !important; }
.wb-mt-10 { margin-top: 2.5rem !important; }
.wb-mt-11 { margin-top: 2.75rem !important; }
.wb-mt-12 { margin-top: 3rem !important; }
.wb-mt-13 { margin-top: 3.25rem !important; }
.wb-mt-14 { margin-top: 3.5rem !important; }
.wb-mt-15 { margin-top: 3.75rem !important; }
.wb-mt-16 { margin-top: 4rem !important; }
.wb-mt-auto { margin-top: auto !important; }

/* 右側マージン */
.wb-mr-0 { margin-right: 0px !important; }
.wb-mr-1 { margin-right: 0.25rem !important; }
.wb-mr-2 { margin-right: 0.5rem !important; }
.wb-mr-3 { margin-right: 0.75rem !important; }
.wb-mr-4 { margin-right: 1rem !important; }
.wb-mr-5 { margin-right: 1.25rem !important; }
.wb-mr-6 { margin-right: 1.5rem !important; }
.wb-mr-7 { margin-right: 1.75rem !important; }
.wb-mr-8 { margin-right: 2rem !important; }
.wb-mr-9 { margin-right: 2.25rem !important; }
.wb-mr-10 { margin-right: 2.5rem !important; }
.wb-mr-11 { margin-right: 2.75rem !important; }
.wb-mr-12 { margin-right: 3rem !important; }
.wb-mr-13 { margin-right: 3.25rem !important; }
.wb-mr-14 { margin-right: 3.5rem !important; }
.wb-mr-15 { margin-right: 3.75rem !important; }
.wb-mr-16 { margin-right: 4rem !important; }
.wb-mr-auto { margin-right: auto !important; }

/* 下部マージン */
.wb-mb-0 { margin-bottom: 0px !important; }
.wb-mb-1 { margin-bottom: 0.25rem !important; }
.wb-mb-2 { margin-bottom: 0.5rem !important; }
.wb-mb-3 { margin-bottom: 0.75rem !important; }
.wb-mb-4 { margin-bottom: 1rem !important; }
.wb-mb-5 { margin-bottom: 1.25rem !important; }
.wb-mb-6 { margin-bottom: 1.5rem !important; }
.wb-mb-7 { margin-bottom: 1.75rem !important; }
.wb-mb-8 { margin-bottom: 2rem !important; }
.wb-mb-9 { margin-bottom: 2.25rem !important; }
.wb-mb-10 { margin-bottom: 2.5rem !important; }
.wb-mb-11 { margin-bottom: 2.75rem !important; }
.wb-mb-12 { margin-bottom: 3rem !important; }
.wb-mb-13 { margin-bottom: 3.25rem !important; }
.wb-mb-14 { margin-bottom: 3.5rem !important; }
.wb-mb-15 { margin-bottom: 3.75rem !important; }
.wb-mb-16 { margin-bottom: 4rem !important; }
.wb-mb-auto { margin-bottom: auto !important; }

/* 左側マージン */
.wb-ml-0 { margin-left: 0px !important; }
.wb-ml-1 { margin-left: 0.25rem !important; }
.wb-ml-2 { margin-left: 0.5rem !important; }
.wb-ml-3 { margin-left: 0.75rem !important; }
.wb-ml-4 { margin-left: 1rem !important; }
.wb-ml-5 { margin-left: 1.25rem !important; }
.wb-ml-6 { margin-left: 1.5rem !important; }
.wb-ml-7 { margin-left: 1.75rem !important; }
.wb-ml-8 { margin-left: 2rem !important; }
.wb-ml-9 { margin-left: 2.25rem !important; }
.wb-ml-10 { margin-left: 2.5rem !important; }
.wb-ml-11 { margin-left: 2.75rem !important; }
.wb-ml-12 { margin-left: 3rem !important; }
.wb-ml-13 { margin-left: 3.25rem !important; }
.wb-ml-14 { margin-left: 3.5rem !important; }
.wb-ml-15 { margin-left: 3.75rem !important; }
.wb-ml-16 { margin-left: 4rem !important; }
.wb-ml-auto { margin-left: auto !important; }



/* 水平・垂直マージン */
.wb-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.wb-mx-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

.wb-mx-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.wb-mx-3 {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
}

.wb-mx-4 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.wb-mx-5 {
    margin-left: 1.25rem !important;
    margin-right: 1.25rem !important;
}

.wb-mx-6 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

.wb-mx-7 {
    margin-left: 1.75rem !important;
    margin-right: 1.75rem !important;
}

.wb-mx-8 {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
}

.wb-mx-9 {
    margin-left: 2.25rem !important;
    margin-right: 2.25rem !important;
}

.wb-mx-10 {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
}

.wb-mx-11 {
    margin-left: 2.75rem !important;
    margin-right: 2.75rem !important;
}

.wb-mx-12 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

.wb-mx-13 {
    margin-left: 3.25rem !important;
    margin-right: 3.25rem !important;
}

.wb-mx-14 {
    margin-left: 3.5rem !important;
    margin-right: 3.5rem !important;
}

.wb-mx-15 {
    margin-left: 3.75rem !important;
    margin-right: 3.75rem !important;
}

.wb-mx-16 {
    margin-left: 4rem !important;
    margin-right: 4rem !important;
}



.wb-mx-20 {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
}

.wb-mx-24 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
}

.wb-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.wb-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.wb-my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.wb-my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.wb-my-3 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.wb-my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.wb-my-5 {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

.wb-my-6 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.wb-my-7 {
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
}

.wb-my-8 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.wb-my-9 {
    margin-top: 2.25rem !important;
    margin-bottom: 2.25rem !important;
}

.wb-my-10 {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
}

.wb-my-11 {
    margin-top: 2.75rem !important;
    margin-bottom: 2.75rem !important;
}

.wb-my-12 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.wb-my-13 {
    margin-top: 3.25rem !important;
    margin-bottom: 3.25rem !important;
}

.wb-my-14 {
    margin-top: 3.5rem !important;
    margin-bottom: 3.5rem !important;
}

.wb-my-15 {
    margin-top: 3.75rem !important;
    margin-bottom: 3.75rem !important;
}

.wb-my-16 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}



.wb-my-20 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.wb-my-24 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.wb-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* ------------------------------------------------------------
 * パディング
 * ------------------------------------------------------------*/
/* 全方向パディング */
.wb-p-0 {
    padding: 0px !important;
}

.wb-p-1 {
    padding: 0.25rem !important; /* 4px */
}

.wb-p-2 {
    padding: 0.5rem !important; /* 8px */
}

.wb-p-3 {
    padding: 0.75rem !important; /* 12px */
}

.wb-p-4 {
    padding: 1rem !important; /* 16px */
}

.wb-p-5 {
    padding: 1.25rem !important; /* 20px */
}

.wb-p-6 {
    padding: 1.5rem !important; /* 24px */
}

.wb-p-7 {
    padding: 1.75rem !important; /* 28px */
}

.wb-p-8 {
    padding: 2rem !important; /* 32px */
}

.wb-p-9 {
    padding: 2.25rem !important; /* 36px */
}

.wb-p-10 {
    padding: 2.5rem !important; /* 40px */
}

.wb-p-11 {
    padding: 2.75rem !important; /* 44px */
}

.wb-p-12 {
    padding: 3rem !important; /* 48px */
}

.wb-p-13 {
    padding: 3.25rem !important; /* 52px */
}

.wb-p-14 {
    padding: 3.5rem !important; /* 56px */
}

.wb-p-15 {
    padding: 3.75rem !important; /* 60px */
}

.wb-p-16 {
    padding: 4rem !important; /* 64px */
}



.wb-p-20 {
    padding: 5rem !important; /* 80px */
}

.wb-p-24 {
    padding: 6rem !important; /* 96px */
}

.wb-p-32 {
    padding: 8rem !important; /* 128px */
}

.wb-p-40 {
    padding: 10rem !important; /* 160px */
}

.wb-p-48 {
    padding: 12rem !important; /* 192px */
}

.wb-p-56 {
    padding: 14rem !important; /* 224px */
}

.wb-p-64 {
    padding: 16rem !important; /* 256px */
}

/* 方向別パディング */
/* 上部パディング */
.wb-pt-0 { padding-top: 0px !important; }
.wb-pt-1 { padding-top: 0.25rem !important; }
.wb-pt-2 { padding-top: 0.5rem !important; }
.wb-pt-3 { padding-top: 0.75rem !important; }
.wb-pt-4 { padding-top: 1rem !important; }
.wb-pt-5 { padding-top: 1.25rem !important; }
.wb-pt-6 { padding-top: 1.5rem !important; }
.wb-pt-7 { padding-top: 1.75rem !important; }
.wb-pt-8 { padding-top: 2rem !important; }
.wb-pt-9 { padding-top: 2.25rem !important; }
.wb-pt-10 { padding-top: 2.5rem !important; }
.wb-pt-11 { padding-top: 2.75rem !important; }
.wb-pt-12 { padding-top: 3rem !important; }
.wb-pt-13 { padding-top: 3.25rem !important; }
.wb-pt-14 { padding-top: 3.5rem !important; }
.wb-pt-15 { padding-top: 3.75rem !important; }
.wb-pt-16 { padding-top: 4rem !important; }

/* 右側パディング */
.wb-pr-0 { padding-right: 0px !important; }
.wb-pr-1 { padding-right: 0.25rem !important; }
.wb-pr-2 { padding-right: 0.5rem !important; }
.wb-pr-3 { padding-right: 0.75rem !important; }
.wb-pr-4 { padding-right: 1rem !important; }
.wb-pr-5 { padding-right: 1.25rem !important; }
.wb-pr-6 { padding-right: 1.5rem !important; }
.wb-pr-7 { padding-right: 1.75rem !important; }
.wb-pr-8 { padding-right: 2rem !important; }
.wb-pr-9 { padding-right: 2.25rem !important; }
.wb-pr-10 { padding-right: 2.5rem !important; }
.wb-pr-11 { padding-right: 2.75rem !important; }
.wb-pr-12 { padding-right: 3rem !important; }
.wb-pr-13 { padding-right: 3.25rem !important; }
.wb-pr-14 { padding-right: 3.5rem !important; }
.wb-pr-15 { padding-right: 3.75rem !important; }
.wb-pr-16 { padding-right: 4rem !important; }

/* 下部パディング */
.wb-pb-0 { padding-bottom: 0px !important; }
.wb-pb-1 { padding-bottom: 0.25rem !important; }
.wb-pb-2 { padding-bottom: 0.5rem !important; }
.wb-pb-3 { padding-bottom: 0.75rem !important; }
.wb-pb-4 { padding-bottom: 1rem !important; }
.wb-pb-5 { padding-bottom: 1.25rem !important; }
.wb-pb-6 { padding-bottom: 1.5rem !important; }
.wb-pb-7 { padding-bottom: 1.75rem !important; }
.wb-pb-8 { padding-bottom: 2rem !important; }
.wb-pb-9 { padding-bottom: 2.25rem !important; }
.wb-pb-10 { padding-bottom: 2.5rem !important; }
.wb-pb-11 { padding-bottom: 2.75rem !important; }
.wb-pb-12 { padding-bottom: 3rem !important; }
.wb-pb-13 { padding-bottom: 3.25rem !important; }
.wb-pb-14 { padding-bottom: 3.5rem !important; }
.wb-pb-15 { padding-bottom: 3.75rem !important; }
.wb-pb-16 { padding-bottom: 4rem !important; }

/* 左側パディング */
.wb-pl-0 { padding-left: 0px !important; }
.wb-pl-1 { padding-left: 0.25rem !important; }
.wb-pl-2 { padding-left: 0.5rem !important; }
.wb-pl-3 { padding-left: 0.75rem !important; }
.wb-pl-4 { padding-left: 1rem !important; }
.wb-pl-5 { padding-left: 1.25rem !important; }
.wb-pl-6 { padding-left: 1.5rem !important; }
.wb-pl-7 { padding-left: 1.75rem !important; }
.wb-pl-8 { padding-left: 2rem !important; }
.wb-pl-9 { padding-left: 2.25rem !important; }
.wb-pl-10 { padding-left: 2.5rem !important; }
.wb-pl-11 { padding-left: 2.75rem !important; }
.wb-pl-12 { padding-left: 3rem !important; }
.wb-pl-13 { padding-left: 3.25rem !important; }
.wb-pl-14 { padding-left: 3.5rem !important; }
.wb-pl-15 { padding-left: 3.75rem !important; }
.wb-pl-16 { padding-left: 4rem !important; }

 

/* 水平・垂直パディング */
.wb-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.wb-px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.wb-px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.wb-px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.wb-px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.wb-px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.wb-px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.wb-px-7 {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}

.wb-px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.wb-px-9 {
    padding-left: 2.25rem !important;
    padding-right: 2.25rem !important;
}

.wb-px-10 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}

.wb-px-11 {
    padding-left: 2.75rem !important;
    padding-right: 2.75rem !important;
}

.wb-px-12 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

.wb-px-13 {
    padding-left: 3.25rem !important;
    padding-right: 3.25rem !important;
}

.wb-px-14 {
    padding-left: 3.5rem !important;
    padding-right: 3.5rem !important;
}

.wb-px-15 {
    padding-left: 3.75rem !important;
    padding-right: 3.75rem !important;
}

.wb-px-16 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}



.wb-px-20 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
}

.wb-px-24 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
}

.wb-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.wb-py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.wb-py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.wb-py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.wb-py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.wb-py-5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.wb-py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.wb-py-7 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
}

.wb-py-8 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.wb-py-9 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
}

.wb-py-10 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.wb-py-11 {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
}

.wb-py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.wb-py-13 {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
}

.wb-py-14 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

.wb-py-15 {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
}

.wb-py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}



.wb-py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.wb-py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

/* ------------------------------------------------------------
 * グリッドレイアウト
 * ------------------------------------------------------------*/
/* グリッドコンテナ */
.wb-grid {
    display: grid !important;
}

/* グリッド列数 */
.wb-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.wb-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.wb-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.wb-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.wb-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.wb-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.wb-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

/* グリッド行数 */
.wb-grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr)) !important;
}

.wb-grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.wb-grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.wb-grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}

/* グリッドギャップ */
.wb-gap-1 {
    gap: 0.25rem !important; /* 4px */
}

.wb-gap-2 {
    gap: 0.5rem !important; /* 8px */
}

.wb-gap-3 {
    gap: 0.75rem !important; /* 12px */
}

.wb-gap-4 {
    gap: 1rem !important; /* 16px */
}

.wb-gap-5 {
    gap: 1.25rem !important; /* 20px */
}

.wb-gap-6 {
    gap: 1.5rem !important; /* 24px */
}

.wb-gap-8 {
    gap: 2rem !important; /* 32px */
}

.wb-gap-10 {
    gap: 2.5rem !important; /* 40px */
}

.wb-gap-12 {
    gap: 3rem !important; /* 48px */
}

.wb-gap-16 {
    gap: 4rem !important; /* 64px */
}

/* 列方向のギャップ */
.wb-gap-x-1 {
    column-gap: 0.25rem !important;
}

.wb-gap-x-2 {
    column-gap: 0.5rem !important;
}

.wb-gap-x-4 {
    column-gap: 1rem !important;
}

.wb-gap-x-6 {
    column-gap: 1.5rem !important;
}

.wb-gap-x-8 {
    column-gap: 2rem !important;
}

.wb-gap-x-12 {
    column-gap: 3rem !important;
}

/* 行方向のギャップ */
.wb-gap-y-1 {
    row-gap: 0.25rem !important;
}

.wb-gap-y-2 {
    row-gap: 0.5rem !important;
}

.wb-gap-y-4 {
    row-gap: 1rem !important;
}

.wb-gap-y-6 {
    row-gap: 1.5rem !important;
}

.wb-gap-y-8 {
    row-gap: 2rem !important;
}

.wb-gap-y-12 {
    row-gap: 3rem !important;
}

/* レスポンシブグリッド */
@media (min-width: 768px) {
    .wb-md\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    .wb-md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .wb-md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .wb-md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    .wb-md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    
    .wb-md\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    
    .wb-md\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .wb-lg\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    .wb-lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .wb-lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .wb-lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    .wb-lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    
    .wb-lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    
    .wb-lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    .wb-xl\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    .wb-xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .wb-xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .wb-xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    .wb-xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    
    .wb-xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    
    .wb-xl\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
}

/* ------------------------------------------------------------
 * フレックスボックス
 * ------------------------------------------------------------*/
/* フレックスコンテナ */
.wb-flex {
    display: flex !important;
}

.wb-inline-flex {
    display: inline-flex !important;
}

/* フレックス方向 */
.wb-flex-row {
    flex-direction: row !important;
}

.wb-flex-row-reverse {
    flex-direction: row-reverse !important;
}

.wb-flex-col {
    flex-direction: column !important;
}

.wb-flex-col-reverse {
    flex-direction: column-reverse !important;
}

/* フレックスラップ */
.wb-flex-wrap {
    flex-wrap: wrap !important;
}

.wb-flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

.wb-flex-nowrap {
    flex-wrap: nowrap !important;
}

/* フレックスアイテムの配置 */
.wb-items-start {
    align-items: flex-start !important;
}

.wb-items-end {
    align-items: flex-end !important;
}

.wb-items-center {
    align-items: center !important;
}

.wb-items-baseline {
    align-items: baseline !important;
}

.wb-items-stretch {
    align-items: stretch !important;
}

/* フレックスコンテンツの配置 */
.wb-justify-start {
    justify-content: flex-start !important;
}

.wb-justify-end {
    justify-content: flex-end !important;
}

.wb-justify-center {
    justify-content: center !important;
}

.wb-justify-between {
    justify-content: space-between !important;
}

.wb-justify-around {
    justify-content: space-around !important;
}

.wb-justify-evenly {
    justify-content: space-evenly !important;
}

/* フレックスアイテムの間隔 */
.wb-space-x-1 > * + * {
    margin-left: 0.25rem !important; /* 4px */
}

.wb-space-x-2 > * + * {
    margin-left: 0.5rem !important; /* 8px */
}

.wb-space-x-3 > * + * {
    margin-left: 0.75rem !important; /* 12px */
}

.wb-space-x-4 > * + * {
    margin-left: 1rem !important; /* 16px */
}

.wb-space-x-5 > * + * {
    margin-left: 1.25rem !important; /* 20px */
}

.wb-space-x-6 > * + * {
    margin-left: 1.5rem !important; /* 24px */
}

.wb-space-x-8 > * + * {
    margin-left: 2rem !important; /* 32px */
}

.wb-space-x-10 > * + * {
    margin-left: 2.5rem !important; /* 40px */
}

.wb-space-x-12 > * + * {
    margin-left: 3rem !important; /* 48px */
}

.wb-space-x-16 > * + * {
    margin-left: 4rem !important; /* 64px */
}

/* フレックスアイテムの垂直間隔 */
.wb-space-y-1 > * + * {
    margin-top: 0.25rem !important; /* 4px */
}

.wb-space-y-2 > * + * {
    margin-top: 0.5rem !important; /* 8px */
}

.wb-space-y-3 > * + * {
    margin-top: 0.75rem !important; /* 12px */
}

.wb-space-y-4 > * + * {
    margin-top: 1rem !important; /* 16px */
}

.wb-space-y-5 > * + * {
    margin-top: 1.25rem !important; /* 20px */
}

.wb-space-y-6 > * + * {
    margin-top: 1.5rem !important; /* 24px */
}

.wb-space-y-8 > * + * {
    margin-top: 2rem !important; /* 32px */
}

.wb-space-y-10 > * + * {
    margin-top: 2.5rem !important; /* 40px */
}

.wb-space-y-12 > * + * {
    margin-top: 3rem !important; /* 48px */
}

.wb-space-y-16 > * + * {
    margin-top: 4rem !important; /* 64px */
}

/* フレックスアイテムの成長・縮小 */
.wb-flex-1 {
    flex: 1 1 0% !important;
}

.wb-flex-auto {
    flex: 1 1 auto !important;
}

.wb-flex-initial {
    flex: 0 1 auto !important;
}

.wb-flex-none {
    flex: none !important;
}

/* フレックスアイテムの順序 */
.wb-order-first {
    order: -9999 !important;
}

.wb-order-last {
    order: 9999 !important;
}

.wb-order-none {
    order: 0 !important;
}

.wb-order-1 {
    order: 1 !important;
}

.wb-order-2 {
    order: 2 !important;
}

.wb-order-3 {
    order: 3 !important;
}

.wb-order-4 {
    order: 4 !important;
}

.wb-order-5 {
    order: 5 !important;
}

.wb-order-6 {
    order: 6 !important;
}

.wb-order-7 {
    order: 7 !important;
}

.wb-order-8 {
    order: 8 !important;
}

.wb-order-9 {
    order: 9 !important;
}

.wb-order-10 {
    order: 10 !important;
}

.wb-order-11 {
    order: 11 !important;
}

.wb-order-12 {
    order: 12 !important;
}

/* ------------------------------------------------------------
 * アライメントクラス
 * ------------------------------------------------------------*/
.wb-text-left {
    text-align: left !important;
}

.wb-text-center {
    text-align: center !important;
}

.wb-text-right {
    text-align: right !important;
}

/* ------------------------------------------------------------
 * 最大幅
 * ------------------------------------------------------------*/
.wb-max-w-3xs {
    max-width: var(--container-3xs) !important; /* 16rem (256px) */
}

.wb-max-w-2xs {
    max-width: var(--container-2xs) !important; /* 18rem (288px) */
}

.wb-max-w-xs {
    max-width: var(--container-xs) !important; /* 20rem (320px) */
}

.wb-max-w-sm {
    max-width: var(--container-sm) !important; /* 24rem (384px) */
}

.wb-max-w-md {
    max-width: var(--container-md) !important; /* 28rem (448px) */
}

.wb-max-w-lg {
    max-width: var(--container-lg) !important; /* 32rem (512px) */
}

.wb-max-w-xl {
    max-width: var(--container-xl) !important; /* 36rem (576px) */
}

.wb-max-w-2xl {
    max-width: var(--container-2xl) !important; /* 42rem (672px) */
}

.wb-max-w-3xl {
    max-width: var(--container-3xl) !important; /* 48rem (768px) */
}

.wb-max-w-4xl {
    max-width: var(--container-4xl) !important; /* 56rem (896px) */
}

.wb-max-w-5xl {
    max-width: var(--container-5xl) !important; /* 64rem (1024px) */
}

.wb-max-w-6xl {
    max-width: var(--container-6xl) !important; /* 72rem (1152px) */
}

.wb-max-w-7xl {
    max-width: var(--container-7xl) !important; /* 80rem (1280px) */
}

.wb-max-w-none {
    max-width: none !important;
}

.wb-max-w-px {
    max-width: 1px !important;
}

.wb-max-w-full {
    max-width: 100% !important;
}

.wb-max-w-dvw {
    max-width: 100dvw !important;
}

.wb-max-w-dvh {
    max-width: 100dvh !important;
}

.wb-max-w-lvw {
    max-width: 100lvw !important;
}

.wb-max-w-lvh {
    max-width: 100lvh !important;
}

.wb-max-w-svw {
    max-width: 100svw !important;
}

.wb-max-w-svh {
    max-width: 100svh !important;
}

.wb-max-w-screen {
    max-width: 100vw !important;
}

.wb-max-w-min {
    max-width: min-content !important;
}

.wb-max-w-max {
    max-width: max-content !important;
}

.wb-max-w-fit {
    max-width: fit-content !important;
}

/* ------------------------------------------------------------
 * グラデーション
 * ------------------------------------------------------------*/
/* グラデーション方向 */
.wb-bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

.wb-bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops)) !important;
}

.wb-bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important;
}

.wb-bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
}

.wb-bg-gradient-to-tr {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops)) !important;
}

.wb-bg-gradient-to-tl {
    background-image: linear-gradient(to top left, var(--tw-gradient-stops)) !important;
}

.wb-bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}

.wb-bg-gradient-to-bl {
    background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)) !important;
}

/* グラデーション色の組み合わせ */
.wb-from-cyan-500 {
    --tw-gradient-from: var(--wb-color-cyan-500) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0)) !important;
}

.wb-to-blue-500 {
    --tw-gradient-to: var(--wb-color-blue-500) !important;
}

.wb-from-green-600 {
    --tw-gradient-from: var(--wb-color-green-600) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 163, 74, 0)) !important;
}

.wb-to-blue-600 {
    --tw-gradient-to: var(--wb-color-blue-600) !important;
}

.wb-from-sky-600 {
    --tw-gradient-from: var(--wb-color-sky-600) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(2, 132, 199, 0)) !important;
}

.wb-to-indigo-600 {
    --tw-gradient-to: var(--wb-color-indigo-600) !important;
}

.wb-from-purple-600 {
    --tw-gradient-from: var(--wb-color-purple-600) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 51, 234, 0)) !important;
}

.wb-to-pink-600 {
    --tw-gradient-to: var(--wb-color-pink-600) !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .wb-svg-icon svg {
        width: 1.25em;
        height: 1.25em;
    }
}

/* ------------------------------------------------------------
 * レスポンシブ最大幅
 * ------------------------------------------------------------*/
/* タブレット（md）対応 */
@media (min-width: 768px) {
    .wb-md\:max-w-3xs {
        max-width: var(--container-3xs) !important; /* 16rem (256px) */
    }
    
    .wb-md\:max-w-2xs {
        max-width: var(--container-2xs) !important; /* 18rem (288px) */
    }
    
    .wb-md\:max-w-xs {
        max-width: var(--container-xs) !important; /* 20rem (320px) */
    }
    
    .wb-md\:max-w-sm {
        max-width: var(--container-sm) !important; /* 24rem (384px) */
    }
    
    .wb-md\:max-w-md {
        max-width: var(--container-md) !important; /* 28rem (448px) */
    }
    
    .wb-md\:max-w-lg {
        max-width: var(--container-lg) !important; /* 32rem (512px) */
    }
    
    .wb-md\:max-w-xl {
        max-width: var(--container-xl) !important; /* 36rem (576px) */
    }
    
    .wb-md\:max-w-2xl {
        max-width: var(--container-2xl) !important; /* 42rem (672px) */
    }
    
    .wb-md\:max-w-3xl {
        max-width: var(--container-3xl) !important; /* 48rem (768px) */
    }
    
    .wb-md\:max-w-4xl {
        max-width: var(--container-4xl) !important; /* 56rem (896px) */
    }
    
    .wb-md\:max-w-5xl {
        max-width: var(--container-5xl) !important; /* 64rem (1024px) */
    }
    
    .wb-md\:max-w-6xl {
        max-width: var(--container-6xl) !important; /* 72rem (1152px) */
    }
    
    .wb-md\:max-w-7xl {
        max-width: var(--container-7xl) !important; /* 80rem (1280px) */
    }
    
    .wb-md\:max-w-none {
        max-width: none !important;
    }
    
    .wb-md\:max-w-px {
        max-width: 1px !important;
    }
    
    .wb-md\:max-w-full {
        max-width: 100% !important;
    }
    
    .wb-md\:max-w-dvw {
        max-width: 100dvw !important;
    }
    
    .wb-md\:max-w-dvh {
        max-width: 100dvh !important;
    }
    
    .wb-md\:max-w-lvw {
        max-width: 100lvw !important;
    }
    
    .wb-md\:max-w-lvh {
        max-width: 100lvh !important;
    }
    
    .wb-md\:max-w-svw {
        max-width: 100svw !important;
    }
    
    .wb-md\:max-w-svh {
        max-width: 100svh !important;
    }
    
    .wb-md\:max-w-screen {
        max-width: 100vw !important;
    }
    
    .wb-md\:max-w-min {
        max-width: min-content !important;
    }
    
    .wb-md\:max-w-max {
        max-width: max-content !important;
    }
    
    .wb-md\:max-w-fit {
        max-width: fit-content !important;
    }
}

/* デスクトップ（lg）対応 */
@media (min-width: 1024px) {
    .wb-lg\:max-w-3xs {
        max-width: var(--container-3xs) !important; /* 16rem (256px) */
    }
    
    .wb-lg\:max-w-2xs {
        max-width: var(--container-2xs) !important; /* 18rem (288px) */
    }
    
    .wb-lg\:max-w-xs {
        max-width: var(--container-xs) !important; /* 20rem (320px) */
    }
    
    .wb-lg\:max-w-sm {
        max-width: var(--container-sm) !important; /* 24rem (384px) */
    }
    
    .wb-lg\:max-w-md {
        max-width: var(--container-md) !important; /* 28rem (448px) */
    }
    
    .wb-lg\:max-w-lg {
        max-width: var(--container-lg) !important; /* 32rem (512px) */
    }
    
    .wb-lg\:max-w-xl {
        max-width: var(--container-xl) !important; /* 36rem (576px) */
    }
    
    .wb-lg\:max-w-2xl {
        max-width: var(--container-2xl) !important; /* 42rem (672px) */
    }
    
    .wb-lg\:max-w-3xl {
        max-width: var(--container-3xl) !important; /* 48rem (768px) */
    }
    
    .wb-lg\:max-w-4xl {
        max-width: var(--container-4xl) !important; /* 56rem (896px) */
    }
    
    .wb-lg\:max-w-5xl {
        max-width: var(--container-5xl) !important; /* 64rem (1024px) */
    }
    
    .wb-lg\:max-w-6xl {
        max-width: var(--container-6xl) !important; /* 72rem (1152px) */
    }
    
    .wb-lg\:max-w-7xl {
        max-width: var(--container-7xl) !important; /* 80rem (1280px) */
    }
    
    .wb-lg\:max-w-none {
        max-width: none !important;
    }
    
    .wb-lg\:max-w-px {
        max-width: 1px !important;
    }
    
    .wb-lg\:max-w-full {
        max-width: 100% !important;
    }
    
    .wb-lg\:max-w-dvw {
        max-width: 100dvw !important;
    }
    
    .wb-lg\:max-w-dvh {
        max-width: 100dvh !important;
    }
    
    .wb-lg\:max-w-lvw {
        max-width: 100lvw !important;
    }
    
    .wb-lg\:max-w-lvh {
        max-width: 100lvh !important;
    }
    
    .wb-lg\:max-w-svw {
        max-width: 100svw !important;
    }
    
    .wb-lg\:max-w-svh {
        max-width: 100svh !important;
    }
    
    .wb-lg\:max-w-screen {
        max-width: 100vw !important;
    }
    
    .wb-lg\:max-w-min {
        max-width: min-content !important;
    }
    
    .wb-lg\:max-w-max {
        max-width: max-content !important;
    }
    
    .wb-lg\:max-w-fit {
        max-width: fit-content !important;
    }
}

/* 大画面（xl）対応 */
@media (min-width: 1280px) {
    .wb-xl\:max-w-3xs {
        max-width: var(--container-3xs) !important; /* 16rem (256px) */
    }
    
    .wb-xl\:max-w-2xs {
        max-width: var(--container-2xs) !important; /* 18rem (288px) */
    }
    
    .wb-xl\:max-w-xs {
        max-width: var(--container-xs) !important; /* 20rem (320px) */
    }
    
    .wb-xl\:max-w-sm {
        max-width: var(--container-sm) !important; /* 24rem (384px) */
    }
    
    .wb-xl\:max-w-md {
        max-width: var(--container-md) !important; /* 28rem (448px) */
    }
    
    .wb-xl\:max-w-lg {
        max-width: var(--container-lg) !important; /* 32rem (512px) */
    }
    
    .wb-xl\:max-w-xl {
        max-width: var(--container-xl) !important; /* 36rem (576px) */
    }
    
    .wb-xl\:max-w-2xl {
        max-width: var(--container-2xl) !important; /* 42rem (672px) */
    }
    
    .wb-xl\:max-w-3xl {
        max-width: var(--container-3xl) !important; /* 48rem (768px) */
    }
    
    .wb-xl\:max-w-4xl {
        max-width: var(--container-4xl) !important; /* 56rem (896px) */
    }
    
    .wb-xl\:max-w-5xl {
        max-width: var(--container-5xl) !important; /* 64rem (1024px) */
    }
    
    .wb-xl\:max-w-6xl {
        max-width: var(--container-6xl) !important; /* 72rem (1152px) */
    }
    
    .wb-xl\:max-w-7xl {
        max-width: var(--container-7xl) !important; /* 80rem (1280px) */
    }
    
    .wb-xl\:max-w-none {
        max-width: none !important;
    }
    
    .wb-xl\:max-w-px {
        max-width: 1px !important;
    }
    
    .wb-xl\:max-w-full {
        max-width: 100% !important;
    }
    
    .wb-xl\:max-w-dvw {
        max-width: 100dvw !important;
    }
    
    .wb-xl\:max-w-dvh {
        max-width: 100dvh !important;
    }
    
    .wb-xl\:max-w-lvw {
        max-width: 100lvw !important;
    }
    
    .wb-xl\:max-w-lvh {
        max-width: 100lvh !important;
    }
    
    .wb-xl\:max-w-svw {
        max-width: 100svw !important;
    }
    
    .wb-xl\:max-w-svh {
        max-width: 100svh !important;
    }
    
    .wb-xl\:max-w-screen {
        max-width: 100vw !important;
    }
    
    .wb-xl\:max-w-min {
        max-width: min-content !important;
    }
    
    .wb-xl\:max-w-max {
        max-width: max-content !important;
    }
    
    .wb-xl\:max-w-fit {
        max-width: fit-content !important;
    }
}