/**
 * Registep.jp - 共通ユーティリティクラス（ベース）
 *
 * 目的: ランディングページ・管理画面の両方で使用される基本クラス
 * 内容: 元々存在した2,693行の基本ユーティリティ
 *
 * 使用方法:
 * - インラインstyleの代わりに必ずこれらのクラスを使用
 * - 新しいパターンが必要な場合はこのファイルに追加
 * - !important は意図的に使用（ユーティリティクラスの性質上）
 *
 * @version 2.0.0
 * @date 2025-11-06
 */

/* ==================== テキスト色 ==================== */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-disabled { color: var(--color-text-disabled) !important; }
.text-white { color: var(--color-white) !important; }
.text-black { color: var(--color-black) !important; }

.text-success { color: var(--color-success) !important; }
.text-error { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }

.text-accent { color: var(--color-accent) !important; }
.text-primary-color { color: var(--color-primary) !important; }
.text-secondary-color { color: var(--color-secondary) !important; }

/* ==================== 背景色 ==================== */
.bg-white { background-color: var(--color-white) !important; }
.bg-black { background-color: var(--color-black) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }

.bg-success { background-color: var(--color-success) !important; }
.bg-success-light { background-color: var(--color-success-bg) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-error-light { background-color: var(--color-error-bg) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-light { background-color: var(--color-warning-bg) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-info-light { background-color: var(--color-info-bg) !important; }

.bg-gray-50 { background-color: var(--color-gray-50) !important; }
.bg-gray-100 { background-color: var(--color-gray-100) !important; }
.bg-gray-200 { background-color: var(--color-gray-200) !important; }
.bg-gray-300 { background-color: var(--color-gray-300) !important; }
.bg-gray-800 { background-color: var(--color-gray-800) !important; }
.bg-gray-900 { background-color: var(--color-gray-900) !important; }

.bg-transparent { background-color: transparent !important; }

/* ==================== パディング ==================== */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }
.p-3xl { padding: var(--spacing-3xl) !important; }

/* パディング - X軸（左右） */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }

/* パディング - Y軸（上下） */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }

/* ==================== マージン ==================== */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }

/* マージン - X軸（左右） */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }

/* マージン - Y軸（上下） */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }

/* マージン - 個別 */
.mt-0 { margin-top: 0 !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }

/* ==================== ボタン ==================== */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    text-decoration: none;
    line-height: var(--line-height-normal);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-white);
}

.btn-secondary:hover {
    background: var(--color-secondary-dark);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-white);
}

.btn-accent:hover {
    background: var(--color-accent-dark);
}

.btn-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline-primary:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-success {
    background: var(--color-success);
    color: var(--color-white);
}

.btn-error {
    background: var(--color-error);
    color: var(--color-white);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--color-white);
}

/* ボタンサイズ */
.btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.btn-block {
    display: block;
    width: 100%;
}

/* ==================== カード ==================== */
.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.card-secondary {
    background: var(--color-secondary);
    color: var(--color-white);
}

.card-bordered {
    border: 2px solid var(--color-border);
}

/* ==================== 角丸 ==================== */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ==================== シャドウ ==================== */
.shadow-none { box-shadow: var(--shadow-none) !important; }
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

/* ==================== フォントサイズ ==================== */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-md { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }

/* ==================== フォントウェイト ==================== */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* ==================== テキスト配置 ==================== */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* ==================== 表示制御 ==================== */

.hidden { display: none !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* ==================== Flexbox ==================== */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

/* justify-content */
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }

/* align-items */
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }

/* gap */
.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--spacing-xs) !important; }
.gap-sm { gap: var(--spacing-sm) !important; }
.gap-md { gap: var(--spacing-md) !important; }
.gap-lg { gap: var(--spacing-lg) !important; }
.gap-xl { gap: var(--spacing-xl) !important; }

/* ==================== ボーダー ==================== */
.border { border: var(--border-width-thin) solid var(--color-border) !important; }
.border-top { border-top: var(--border-width-thin) solid var(--color-border) !important; }
.border-bottom { border-bottom: var(--border-width-thin) solid var(--color-border) !important; }
.border-left { border-left: var(--border-width-thin) solid var(--color-border) !important; }
.border-right { border-right: var(--border-width-thin) solid var(--color-border) !important; }
.border-none { border: none !important; }

/* ボーダー色 */
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-error { border-color: var(--color-error) !important; }
.border-warning { border-color: var(--color-warning) !important; }

/* ==================== 幅・高さ ==================== */
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
.w-screen { width: 100vw !important; }
.w-50 { width: 50% !important; }

.h-auto { height: auto !important; }
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }

/* ==================== オーバーフロー ==================== */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

/* ==================== ポジション ==================== */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* ==================== カーソル ==================== */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ==================== ユーザー選択 ==================== */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }

/* ==================== トランジション ==================== */
.transition-fast { transition: all var(--transition-fast) !important; }
.transition-normal { transition: all var(--transition-normal) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }

/* ==================== テキスト装飾 ==================== */
.text-underline { text-decoration: underline !important; }
.text-line-through { text-decoration: line-through !important; }
.text-no-underline { text-decoration: none !important; }

/* ==================== リスト ==================== */
.list-none { list-style: none !important; }
.list-disc { list-style-type: disc !important; }
.list-decimal { list-style-type: decimal !important; }

/* ==================== オブジェクトフィット ==================== */
.object-contain { object-fit: contain !important; }
.object-cover { object-fit: cover !important; }
.object-fill { object-fit: fill !important; }
.object-scale-down { object-fit: scale-down !important; }

/* ==================== コンテナ ==================== */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

@media (min-width: 640px) {
    .container { max-width: var(--container-sm); }
}

@media (min-width: 768px) {
    .container { max-width: var(--container-md); }
}

@media (min-width: 1024px) {
    .container { max-width: var(--container-lg); }
}

@media (min-width: 1280px) {
    .container { max-width: var(--container-xl); }
}

/* ==================== レイアウトコンポーネント ==================== */

/* ヘッダー */
.header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-index-header);
    box-shadow: var(--shadow-sm);
}

.header-sticky {
    position: sticky;
    top: 0;
    z-index: var(--z-index-header);
}

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-header);
}

/* ナビゲーション */
.nav {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-primary);
    background: var(--color-gray-100);
}

.nav-link.active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* フッター */
.footer {
    background: var(--color-gray-900);
    color: var(--color-white);
    padding: var(--spacing-2xl) 0;
    margin-top: var(--spacing-3xl);
}

.footer-link {
    color: var(--color-gray-300);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-white);
}

/* サイドバー */
.sidebar {
    width: 250px;
    background: var(--color-white);
    border-right: 1px solid var(--color-border);
    padding: var(--spacing-lg);
    min-height: 100vh;
}

.sidebar-sticky {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

/* メインコンテンツエリア */
.main-content {
    flex: 1;
    padding: var(--spacing-xl);
    max-width: var(--container-lg);
    margin: 0 auto;
}

/* コンテナレイアウト */
.layout-with-sidebar {
    display: flex;
    min-height: 100vh;
}

.layout-centered {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

/* ブレッドクラム */
.breadcrumb {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.breadcrumb-separator {
    color: var(--color-text-muted);
}

.breadcrumb-link {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumb-current {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* ページヘッダー */
.page-header {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.page-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.page-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
}

/* ==================== Registep専用の複合クラス ==================== */
/* 頻出パターンに対応 */

/* フレックス + アライン + ギャップ + フォントサイズ */
.d-flex-center-gap-sm-text-sm {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.8rem !important;
}

/* パディング + ボーダートップ */
.p-card-border-top {
    padding: 0.75rem 1rem !important;
    border-top: 1px solid var(--color-border) !important;
}

/* セクションタイトル */
.section-title {
    text-align: center !important;
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 3rem !important;
    letter-spacing: 0.1rem !important;
}

/* テーブルセル */
.table-cell {
    padding: 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* アイコン大 */
.icon-lg {
    color: var(--color-accent) !important;
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
}

/* 成功色アイコン */
.icon-success {
    color: var(--color-success) !important;
    flex-shrink: 0 !important;
}

/* pointer-events: none */
.pointer-events-none {
    pointer-events: none !important;
}

/* margin-bottom: 0 */
.mb-0 {
    margin-bottom: 0 !important;
}

/* モーダルコンテンツ */
.modal-content-scroll {
    padding: 2rem !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

/* テキスト装飾なし + カーソルポインター */
.link-plain {
    text-decoration: none !important;
    cursor: pointer !important;
}

/* フレックス + space-between */
.d-flex-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* position: relative */
.pos-relative {
    position: relative !important;
}

/* z-index: 9999 + pointer-events: auto */
.z-top-interactive {
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

/* margin-top: 1rem + display: none */
.mt-md-hidden {
    display: none !important;
    margin-top: 1rem !important;
}

/* flex: 1 */
.flex-1 {
    flex: 1 !important;
}

/* フォントサイズのみ */
.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-md { font-size: 1.125rem !important; }
.text-lg { font-size: 1.25rem !important; }
.text-xl { font-size: 1.5rem !important; }
.text-2xl { font-size: 1.875rem !important; }

/* フォントウェイト */
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* color: #666 */
.text-gray-dark {
    color: #666 !important;
}

/* color: #6c757d */
.text-muted-secondary {
    color: #6c757d !important;
}


/* ==================== 追加の複合クラス（Phase 2） ==================== */

/* マージン + フォントサイズ + テキスト色 */
.info-label {
    margin: 0.25rem 0 0 0 !important;
    font-size: 0.875rem !important;
    color: var(--color-text-secondary) !important;
}

/* フレックス + ギャップ + パディング + テキスト色 */
.flex-info-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.25rem 0 !important;
    color: #64748b !important;
    font-size: 0.9rem !important;
}

/* オーバーフロー + ボーダー半径 + モーダル */
.modal-container {
    overflow: hidden !important;
    border-radius: var(--radius-lg) !important;
    border: 0 !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* フォントウェイト + アクセント色 */
.text-accent-bold {
    font-weight: 700 !important;
    color: var(--color-accent) !important;
}

/* display: none + margin-top */
.hidden-mt-md {
    display: none !important;
    margin-top: 1rem !important;
}

/* パディング（中） */
.p-card {
    padding: 0.75rem 1rem !important;
}

/* position: relative + inline-block */
.pos-relative-inline {
    position: relative !important;
    display: inline-block !important;
    margin-bottom: 0 !important;
}

/* position: absolute + bottom + right（アイコン用） */
.icon-badge {
    position: absolute !important;
    bottom: 1.9rem !important;
    right: -1.5rem !important;
    font-size: 1.35rem !important;
    color: var(--color-accent) !important;
    -webkit-text-stroke: 0.7px var(--color-accent) !important;
}

/* opacity */
.opacity-80 {
    opacity: 0.8 !important;
}

/* margin-top variants */
.mt-0 {
    margin-top: 0 !important;
}

.mt-xs {
    margin-top: var(--spacing-xs) !important;
}

.mt-2xl {
    margin-top: var(--spacing-2xl) !important;
}

/* list-style: none */
.list-unstyled {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* flex: 1 + text-align: center */
.flex-1-center {
    flex: 1 !important;
    text-align: center !important;
}

/* フレックス + column + gap */
.flex-col-gap-md {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* テキストプライマリ + フォントウェイト + margin-bottom */
.label-primary {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

.label-primary-lg {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    margin-bottom: 1.5rem !important;
}

/* アクセント色ラベル */
.label-accent {
    color: var(--color-accent) !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

/* 背景白 + ボーダーボトム + パディング */
.header-card {
    background: white !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    padding: 1rem 2rem !important;
    flex-shrink: 0 !important;
}

/* 背景ライト + パディング + ボーダー半径 */
.info-box {
    background: var(--color-bg-light) !important;
    padding: 1.5rem !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 1.5rem !important;
}

/* パディング + text-align */
.p-card-right {
    padding: 0.75rem 1rem !important;
    text-align: right !important;
    color: #6b7280 !important;
}

/* フォントウェイト + マージントップ */
.font-semibold-mt-md {
    font-weight: 600 !important;
    margin-top: 1rem !important;
}

/* ボーダーボトム */
.border-bottom-light {
    border-bottom: 1px solid #e0e0e0 !important;
}

/* 背景白 */
.bg-white {
    background: white !important;
}

/* margin: 0 + フォントサイズ + フォントウェイト */
.heading-primary {
    margin: 0 !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #1a202c !important;
}

/* 成功色テキスト */
.text-success-sm {
    margin: 0.5rem 0 0 0 !important;
    font-size: 0.875rem !important;
    color: #2e7d32 !important;
}

/* セパレーター */
.separator {
    margin: 0 0.5rem !important;
    color: var(--color-border-light) !important;
}

/* margin-top: 0.5rem */
.mt-sm-half {
    margin-top: 0.5rem !important;
}


/* ==================== レイアウト - 追加パターン ==================== */
.flex-between-center {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.flex-between-center-pad {
    padding: 0.75rem 1rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
}

.flex-left-pad {
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
}

/* ==================== リストスタイル ==================== */
.list-none {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==================== テキストスタイル - 追加 ==================== */
.text-gray-label {
    color: #6b7280 !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.text-gray-body {
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
    font-size: 0.8rem !important;
}

.text-heading-small {
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.1rem !important;
}

.text-white-large {
    font-size: 1.75rem !important;
    color: white !important;
}

.text-white-heading {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: white !important;
}

.text-accent-small {
    font-size: 0.875rem !important;
    color: var(--color-accent) !important;
    font-weight: 600 !important;
}

.text-muted-small {
    font-size: 0.8125rem !important;
    color: #aaa !important;
}

/* ==================== ボタンサイズバリエーション ==================== */
.btn-sm-custom {
    font-size: 0.8rem !important;
    --bs-btn-padding-y: 0.3rem !important;
    --bs-btn-padding-x: 1rem !important;
}

/* ==================== スペーシング - 追加 ==================== */
.ml-lg {
    margin-left: 1.5rem !important;
}

.section-heading {
    font-weight: 600 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
    color: var(--color-text-primary) !important;
}

/* ==================== テキストスタイル - 追加2 ==================== */
.text-dark-bold {
    font-weight: 600 !important;
    color: #333 !important;
}

.text-dark-primary {
    color: #1a1a1a !important;
}

.text-success {
    color: #2e7d32 !important;
}

.text-sm {
    font-size: 0.875rem !important;
    margin: 0 !important;
}

.text-xs {
    font-size: 0.75rem !important;
}

.text-xs-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: 0.5rem !important;
}

.text-xs-muted {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    margin-top: 0.5rem !important;
}

.table-header-cell {
    font-weight: 600 !important;
    color: #374151 !important;
    padding: 16px !important;
    border: none !important;
}

.table-cell-normal {
    padding: 16px !important;
    border: none !important;
}

.table-cell-right-success {
    padding: 0.75rem 1rem !important;
    text-align: right !important;
    font-weight: 600 !important;
    color: #059669 !important;
}

.table-cell-medium {
    padding: 0.75rem 1rem !important;
    font-weight: 500 !important;
}

.table-cell-bold-between {
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 700 !important;
}

/* ==================== レイアウト - 追加2 ==================== */
.flex-center-gap {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.flex-center-gap-sm {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.flex-col-gap-sm {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

.flex-1-pad-top {
    flex: 1 !important;
    padding-top: 0.5rem !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* ==================== ボーダー ==================== */
.border-bottom-light {
    border-bottom: 1px solid #f3f4f6 !important;
}

/* ==================== バッジ ==================== */
.badge-accent {
    background: var(--color-accent) !important;
    color: white !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
}

.badge-medium {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* ==================== カード ==================== */
.card-gradient {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    height: 100% !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.card-success {
    background: #e8f5e9 !important;
    padding: 1rem !important;
    border-radius: var(--radius-md) !important;
    margin-top: 1.5rem !important;
}

/* ==================== ステップインジケーター ==================== */
.step-circle {
    width: 40px !important;
    height: 40px !important;
    background: var(--color-accent) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
}

.step-line {
    width: 2px !important;
    height: calc(100% + 2.5rem) !important;
    background: linear-gradient(to bottom, var(--color-accent) 0%, #d0d0d0 100%) !important;
    position: absolute !important;
    left: 19px !important;
    top: 40px !important;
}

/* ==================== インプット ==================== */
.input-sm-120 {
    width: 120px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
}

.input-sm-100 {
    width: 100px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
}

/* ==================== レイアウト - 追加3 ==================== */
.position-relative-inline {
    position: relative !important;
    display: inline-block !important;
    margin-bottom: 0rem !important;
}

.position-absolute-icon {
    position: absolute !important;
    bottom: 1.9rem !important;
    right: -1.5rem !important;
    font-size: 1.35rem !important;
    color: var(--color-accent) !important;
    -webkit-text-stroke: .7px var(--color-accent) !important;
}

.flex-gap-relative {
    display: flex !important;
    gap: 1rem !important;
    margin-bottom: 2.5rem !important;
    position: relative !important;
}

.flex-gap-bg-gray {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    padding: 0.75rem !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
}

.flex-center-gap-sm-mb {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.25rem !important;
}

.padding-border-bottom {
    padding: 1.25rem 0 !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    cursor: pointer !important;
}

/* ==================== テキストスタイル - 追加3 ==================== */
.text-center-mb-lg {
    text-align: center !important;
    margin-bottom: 3rem !important;
}

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

.text-md {
    font-size: 16px !important;
}

.text-sm-gray-mt {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-top: 4px !important;
}

.text-label-block {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 0.5rem !important;
}

.text-secondary-sm-mt {
    color: var(--color-text-secondary) !important;
    font-size: 0.8rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0rem !important;
}

.text-danger-bold {
    color: #ff6b35 !important;
    font-weight: 700 !important;
}

/* ==================== マージン ==================== */
.mb-0 {
    margin-bottom: 0 !important;
}

.mt-lg {
    margin-top: 1.5rem !important;
}

/* ==================== 背景 ==================== */
.bg-light-gray {
    background: #f9fafb !important;
}

.bg-gray-chip {
    background: #f3f4f6 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

.bg-success-light {
    background: #f0fdf4 !important;
    padding: 1rem !important;
    border-radius: 8px !important;
}

.bg-success-badge {
    background: #dcfce7 !important;
    color: #22c55e !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
}

.bg-success-badge-solid {
    background: #22c55e !important;
    color: white !important;
    font-size: 0.75rem !important;
}

/* ==================== カード・ボックス ==================== */
.card-white-shadow {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    padding: 1.5rem !important;
}

/* ==================== ボタン - 追加2 ==================== */
.btn-gradient-accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, #1a9cd4 100%) !important;
    color: white !important;
    border: none !important;
    flex-shrink: 0 !important;
}

.btn-text-danger {
    background: none !important;
    border: none !important;
    color: #ef4444 !important;
    padding: 0.25rem !important;
}

/* ==================== インプット - 追加2 ==================== */
.input-sm-bordered {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
}

.input-sm-80 {
    width: 80px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
}

.input-full-sm {
    width: 100% !important;
    font-size: 0.875rem !important;
}

/* ==================== アバター ==================== */
.avatar-circle-accent {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #20aee6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    flex-shrink: 0 !important;
}

/* ==================== テーブルセル - 追加2 ==================== */
.table-cell-right-gray-xs {
    padding: 0.75rem 1rem !important;
    text-align: right !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    font-size: 0.75rem !important;
}

.table-cell-right-bold {
    padding: 0.75rem 1rem !important;
    text-align: right !important;
    font-weight: 600 !important;
}

.table-cell-left-gray-xs {
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    font-size: 0.75rem !important;
}

/* ==================== ナビゲーション - レスポンシブ対応 ==================== */
.navbar-links {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

@media (max-width: 991px) {
    .navbar-links {
        display: none !important;
    }
}

/* ==================== 第4回削減 - テキストスタイル ==================== */
.text-line-height-secondary {
    line-height: 1.8 !important;
    color: var(--color-text-secondary) !important;
}

.text-bold-mb-lg-primary {
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    color: var(--color-text-primary) !important;
}

.text-3xl-white {
    font-size: 3rem !important;
    color: white !important;
}

.text-2xl-white {
    font-size: 2rem !important;
    color: white !important;
}

.text-base-bold-dark {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #202124 !important;
}

.text-base-bold-dark-margin {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
}

.text-base-bold-dark-mb {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 1.5rem !important;
}

.text-lg-bold-primary-hover {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.5rem 0 !important;
    color: var(--color-text-primary) !important;
    transition: text-decoration 0.2s !important;
}

.text-sm-secondary-line {
    font-size: 0.875rem !important;
    color: var(--color-text-secondary) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.text-sm-dark-medium {
    font-size: 0.875rem !important;
    color: #202124 !important;
    font-weight: 500 !important;
}

/* ==================== 第4回削減 - レイアウト・Flex ==================== */
.flex-1-mt-xs {
    flex: 1 !important;
    margin-top: .1rem !important;
}

.flex-between-center {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0rem !important;
}

.flex-between-center-mb {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
}

.flex-gap-end {
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
}

.flex-gap-start-mb {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
    margin-bottom: 0.5rem !important;
}

.flex-wrap-gap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.7rem !important;
}

.flex-col-gap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.flex-center-full-gap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
}

.flex-center-gap-lg-mb {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
}

.flex-center-gap-lg-mb-sm {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 0.75rem !important;
}

.flex-center-gap-xs {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
}

/* ==================== 第4回削減 - 背景・バッジ ==================== */
.bg-white-rounded-shadow {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
}

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

.badge-accent {
    background: var(--color-accent-light) !important;
    color: var(--color-accent) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.badge-warning {
    background: #fef3c7 !important;
    color: #f59e0b !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.badge-gray {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
}

.badge-danger {
    background: #d32f2f !important;
    color: white !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
}

.badge-success {
    background: #d1fae5 !important;
    color: #065f46 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

/* ==================== 第4回削減 - ボタン ==================== */
.btn-gray-bordered {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
}

.btn-accent-rounded {
    background: #20aee6 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
}

/* ==================== 第4回削減 - 入力フォーム ==================== */
.input-auto-bordered-xs {
    width: auto !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
}

.input-sm-bordered-rounded {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
}

/* ==================== 第4回削減 - リンク ==================== */
.link-accent {
    color: var(--color-accent) !important;
    text-decoration: none !important;
}

/* ==================== 第5回削減 - アイコンボックス（グラデーション） ==================== */
.icon-box-lg-blue {
    width: 64px !important;
    height: 64px !important;
    background: linear-gradient(135deg, #20aee6 0%, #1a8fbd 100%) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-box-lg-green {
    width: 64px !important;
    height: 64px !important;
    background: linear-gradient(135deg, #06c755 0%, #00b900 100%) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-box-md-purple {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.icon-box-md-slack {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, #611f69 0%, #4a154b 100%) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.icon-box-md-blue {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.icon-box-md-blue-mb {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-bottom: 1.5rem !important;
}

.icon-box-md-green {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, #06c755 0%, #00b900 100%) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.icon-circle-accent-shadow {
    width: 40px !important;
    height: 40px !important;
    background: linear-gradient(135deg, var(--color-accent) 0%, #1a9cd4 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 3px 8px rgba(32, 174, 229, 0.3) !important;
}

/* ==================== 第5回削減 - テキスト配置 ==================== */
.text-left {
    text-align: left !important;
}

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

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

.text-center-hero {
    text-align: center !important;
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: 0.1rem !important;
}

.text-center-subtitle {
    text-align: center !important;
    color: #666 !important;
    font-size: 1rem !important;
    margin-bottom: 3rem !important;
}

.text-right-accent-bold {
    text-align: right !important;
    font-weight: 600 !important;
    color: var(--color-accent) !important;
    padding: 0.5rem 1.5rem !important;
}

/* ==================== 第5回削減 - セクション・パディング ==================== */
.section-white {
    padding: 60px 0 !important;
    background: white !important;
}

.section-light {
    padding: 60px 0 !important;
    background: var(--color-bg-light) !important;
    position: relative !important;
}

.section-padding-lg {
    padding: 4rem 0 !important;
}

/* ==================== 第5回削減 - 特殊レイアウト ==================== */
.iphone-mockup-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 65vh !important;
    background: #000 !important;
    border-radius: 40px !important;
    padding: 12px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

.sticky-content {
    padding: 30px !important;
    position: sticky !important;
    top: 0px !important;
    z-index: 1 !important;
    width: 100% !important;
}

.link-white-col {
    text-decoration: none !important;
    color: white !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

/* ==================== 第5回削減 - ボーダー・背景 ==================== */
.border-top-right {
    padding: 1rem !important;
    border-top: 1px solid #e0e0e0 !important;
    text-align: right !important;
    background: #f8f9fa !important;
}

.bg-warning-light {
    padding: 1rem !important;
    background: #fef3c7 !important;
    border-radius: 8px !important;
}

.bg-gray-subtle {
    padding: 1rem !important;
    background: #fafbfc !important;
}

/* ==================== 第5回削減 - マージン ==================== */
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-lg {
    margin-bottom: 1.5rem !important;
}

.mt-center {
    margin-top: 1rem !important;
    text-align: center !important;
}

.max-width-800 {
    max-width: 800px !important;
}

/* ==================== 第6回削減 - Position固定・絶対配置 ==================== */
.fixed-bottom-right-cta {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9000 !important;
    background: linear-gradient(135deg, #ff7043 0%, #ff5722 100%) !important;
    color: white !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(255, 112, 67, 0.4) !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.3s ease !important;
    max-width: 180px !important;
    text-align: center !important;
    min-width: 190px !important;
}

.progress-bar-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: #20aee6 !important;
    width: 0%;
    z-index: 9999 !important;
    transition: width 0.1s ease !important;
}

.btn-close-preview {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    opacity: 0.7 !important;
    z-index: 10 !important;
}

/* ==================== 第6回削減 - パディング詳細 ==================== */
.padding-30-20 {
    padding: 30px !important;
    padding-bottom: 20px !important;
}

.padding-border-bottom {
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.padding-bg-border-top {
    padding: 1rem 1.5rem !important;
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
}

.padding-bold-no-border {
    padding: 16px !important;
    font-weight: 600 !important;
    border: none !important;
}

.padding-0 {
    padding: 0 !important;
}

.padding-overflow-scroll {
    padding: 0 !important;
    overflow-y: auto !important;
    border-bottom-left-radius: var(--radius-lg) !important;
    border-bottom-right-radius: var(--radius-lg) !important;
    flex: 1 !important;
}

.padding-inline-flex-bold {
    padding: 0.75rem 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    font-weight: 700 !important;
}

.padding-flex-between-cursor {
    padding: 0.75rem 1rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    background: #f8f9fa !important;
}

.padding-sm {
    padding: 0.5rem 1.5rem !important;
}

/* ==================== 第6回削減 - マージン詳細 ==================== */
.margin-sm-orange {
    margin: 0.5rem 0 0 0 !important;
    font-size: 0.875rem !important;
    color: #e65100 !important;
}

.margin-sm-blue {
    margin: 0.5rem 0 0 0 !important;
    font-size: 0.875rem !important;
    color: #0d47a1 !important;
}

.margin-heading-blue {
    margin: 0 0 1rem 0 !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #1e40af !important;
}

.margin-heading-dark {
    margin: 0 0 1.5rem 0 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1a202c !important;
}

.margin-top-bg-rounded {
    margin-top: 2rem !important;
    padding: 1.5rem !important;
    background: #f5f7fa !important;
    border-radius: 12px !important;
}

/* ==================== 第6回削減 - フォント詳細 ==================== */
.font-bold-nowrap {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.font-bold-primary-right {
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    text-align: right !important;
    padding: 0.75rem 1.5rem !important;
}

.font-bold-primary {
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    padding: 0.75rem 1.5rem !important;
}

.font-bold-danger {
    font-weight: 600 !important;
    color: #d32f2f !important;
}

.font-bold-gray {
    font-weight: 600 !important;
    color: #999 !important;
}

.font-bold-gray-dark {
    font-weight: 600 !important;
    color: #374151 !important;
}

.font-bold-blue {
    font-weight: 600 !important;
    color: #1976d2 !important;
}

.font-xl-accent {
    font-size: 20px !important;
    color: var(--color-accent) !important;
}

.font-base-bold-dark-mb {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 1rem !important;
}

.font-sm-medium-gray {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
}

.font-sm-gray-ml {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    margin-left: 0.5rem !important;
}

/* ==================== 第6回削減 - Grid・Flex詳細 ==================== */
.grid-4-col {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
}

.grid-2-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
}

.flex-center-gap-xl-mb {
    display: flex !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.flex-between-mt {
    display: flex !important;
    justify-content: between !important;
    align-items: center !important;
    margin-top: 1rem !important;
}

.flex-gap-relative {
    display: flex !important;
    gap: 1rem !important;
    position: relative !important;
}

.flex-center-text-bold {
    flex: 1 !important;
    text-align: center !important;
    font-weight: 700 !important;
}

.flex-col-padding-gap {
    flex-direction: column !important;
    padding: 0.75rem 1rem !important;
    gap: 0.3rem !important;
}

/* ==================== 第7回削減 - 装飾アイコン（feature-card）==================== */
.feature-icon-decorative {
    position: absolute !important;
    top: 10px !important;
    right: -26px !important;
    font-size: 1.3rem !important;
    color: #20aee5 !important;
    opacity: 0.8 !important;
    z-index: 1 !important;
    display: block !important;
    -webkit-text-stroke: 0.75px #20aee5 !important;
    text-stroke: 0.75px #20aee5 !important;
}

/* ==================== 第7回削減 - バッジスタイル ==================== */
.badge-primary-sm {
    background: #20aee6 !important;
    color: white !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 4px !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
}

.badge-primary-md {
    background: #20aee6 !important;
    color: white !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.badge-blue-rounded {
    background: #1976d2 !important;
    color: white !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
}

.badge-blue-md {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.badge-gray-sm {
    background: #6b7280 !important;
    color: white !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 4px !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
}

.badge-gray-md {
    background: #6b7280 !important;
    color: white !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.badge-gray-rounded {
    background: #d1d5db !important;
    color: #374151 !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.badge-gray-light {
    background: #9ca3af !important;
    color: white !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 4px !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
}

.badge-yellow-rounded {
    background: #d97706 !important;
    color: white !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.badge-yellow-md {
    background: #fbbf24 !important;
    color: white !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.badge-yellow-xs {
    background: #f59e0b !important;
    color: white !important;
    font-size: 0.75rem !important;
}

.badge-green-sm {
    background: #d1fae5 !important;
    color: #065f46 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    margin-left: 8px !important;
}

.badge-red-sm {
    background: #fee2e2 !important;
    color: #991b1b !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

.badge-red-xs {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
}

.badge-orange-gradient {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #ff7043 0%, #ff5722 100%) !important;
    color: white !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 12px !important;
}

.badge-indigo-xs {
    background: #e0e7ff !important;
    color: #6366f1 !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* ==================== 第7回削減 - テキストカラー ==================== */
.text-orange-deep {
    color: #ff6b35 !important;
}

.text-orange-dark {
    color: #e65100 !important;
}

.text-amber-medium {
    color: #d97706 !important;
    font-size: 0.875rem !important;
}

.text-gray-medium {
    color: #999 !important;
}

.text-gray-dark {
    color: #666 !important;
    font-size: 1rem !important;
}

.text-green-bright {
    color: #22c55e !important;
}

.text-blue-accent-mr {
    color: #20aee6 !important;
    margin-right: 0.5rem !important;
}

.text-blue-accent-ml {
    color: #20aee6 !important;
    flex-shrink: 0 !important;
    margin-left: 0.5rem !important;
}

/* ==================== 第7回削減 - 背景スタイル ==================== */
.bg-white-shadow-rounded {
    background: white !important;
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.bg-white-shadow-card {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.bg-white-shadow-center {
    background: white !important;
    border-radius: 16px !important;
    padding: 3rem !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    text-align: center !important;
}

.bg-gray-gradient {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 0rem !important;
}

.bg-yellow-rounded {
    background: #fef3c7 !important;
    padding: 1rem !important;
    border-radius: 8px !important;
}

.bg-amber-light {
    background: #fff3e0 !important;
    padding: 1rem !important;
    border-radius: var(--radius-md) !important;
}

/* ==================== 第7回削減 - フレックスレイアウト ==================== */
.flex-center-justify-gap-lg {
    display: flex !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.flex-col-gap-md {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.flex-col-gap-sm-margin {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin: 1.5rem 0 !important;
}

.flex-start-gap-sm {
    display: flex !important;
    align-items: start !important;
    gap: 0.5rem !important;
}

.flex-center-gap-relative {
    display: flex !important;
    gap: 1rem !important;
    position: relative !important;
}

/* ==================== 第8回削減 - CTAボタン ==================== */
.cta-btn-primary-lg {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background: linear-gradient(135deg, #20aee6 0%, #1a8fbd 100%) !important;
    color: white !important;
    padding: 0.875rem 2rem !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 1.05rem !important;
    margin-bottom: 2rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(32, 174, 230, 0.2) !important;
}

.cta-btn-blue-md {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    color: white !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

/* ==================== 第8回削減 - モーダル ==================== */
.modal-overlay-fullscreen {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

/* ==================== 第8回削減 - フォント詳細 ==================== */
.font-bold-nowrap {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.font-semi-primary-right {
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    text-align: right !important;
    padding: 0.75rem 1.5rem !important;
}

.font-semi-primary-left {
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    padding: 0.75rem 1.5rem !important;
}

.font-semi-gray {
    font-weight: 600 !important;
    color: #999 !important;
}

.font-semi-slate {
    font-weight: 600 !important;
    color: #374151 !important;
}

.font-semi-blue-medium {
    font-weight: 600 !important;
    color: #1976d2 !important;
}

.font-xl-accent {
    font-size: 20px !important;
    color: var(--color-accent) !important;
}

.font-md-semi-dark-mb {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 1rem !important;
}

.font-sm-medium-slate {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
}

.font-sm-gray-ml {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    margin-left: 0.5rem !important;
}

/* ==================== 第8回削減 - レイアウト ==================== */
.grid-2-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
}

.flex-between-mt {
    display: flex !important;
    justify-content: between !important;
    align-items: center !important;
    margin-top: 1rem !important;
}

.flex-center-gap-sm-simple {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
}

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

.cursor-pointer-accent-ml {
    cursor: pointer !important;
    color: var(--color-accent) !important;
    margin-left: 0.25rem !important;
    font-size: 0.85rem !important;
}

/* ==================== 第8回削減 - 背景・ボーダー ==================== */
.bg-blue-gradient-card {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 2px solid #bfdbfe !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.bg-white-padding-lg {
    background: #ffffff !important;
    padding: 60px 0 !important;
}

.bg-gray-light-rounded {
    background: #f9fafb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.bg-gray-lighter {
    background: #f3f4f6 !important;
}

.bg-gray-btn-sm {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    border: none !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
}

.bg-blue-light-rounded {
    background: #e3f2fd !important;
    padding: 1rem !important;
    border-radius: var(--radius-md) !important;
}

.border-bottom-red-bg {
    border-bottom: 1px solid #e0e0e0 !important;
    background: #ffebee !important;
}

/* ==================== 第9回削減 - 最終削減（20個） ==================== */

/* CTAボタン特殊系 */
.cta-btn-white-bordered {
    padding: 1rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 2px solid #20aee6 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #20aee6 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    width: 300px !important;
    box-sizing: border-box !important;
}

.cta-btn-orange-solid {
    background: #ff7043 !important;
    padding: 1rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    width: 300px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: 2px solid transparent !important;
}

/* 小型ボタン・バッジ */
.btn-accent-sm {
    background: #20aee6 !important;
    color: white !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
}

.btn-gray-bordered-sm {
    align-self: flex-start !important;
    background: none !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
}

.btn-accent-fill {
    background: var(--color-accent) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.badge-white-rounded {
    font-size: 0.75rem !important;
    padding: 0.3rem 1rem !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    background: #ffffff !important;
    color: #20aee6 !important;
    border-radius: 20px !important;
    margin-top: 0 !important;
}

.badge-white-transparent {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    background: rgba(255,255,255,0.2) !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 20px !important;
}

.badge-blue-info {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.8rem !important;
    background: #e3f2fd !important;
    padding: 0.125rem 0.25rem !important;
    border-radius: 3px !important;
}

/* テキストスタイル */
.text-orange-bold-xs {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #ff5722 !important;
}

.text-gray-xs {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
}

.text-gray-xs-mt {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
}

.text-gray-light-xs {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
}

.text-brown-xs {
    font-size: 0.75rem !important;
    color: #92400e !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.text-dark-bold-xs {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    font-size: 0.875rem !important;
}

.text-slate-medium {
    color: #4a5568 !important;
    line-height: 1.8 !important;
    margin-bottom: 2rem !important;
    font-size: 1.05rem !important;
}

.text-slate-dark-sm {
    color: #475569 !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
}

.text-blue-bold {
    color: #1976d2 !important;
    font-weight: 600 !important;
}

.text-blue-dark {
    color: #0d47a1 !important;
}

.text-green-bold {
    color: #065f46 !important;
    font-weight: 600 !important;
}

.text-primary-inline {
    color: #202124 !important;
    display: inline-block !important;
}

.text-white-shrink {
    color: white !important;
    flex-shrink: 0 !important;
    margin-left: 0.5rem !important;
}

/* レイアウト */
.flex-col-gap-sm {
    flex-direction: column !important;
    padding: 0.75rem 1rem !important;
    gap: 0.3rem !important;
}

.flex-center-bold {
    flex: 1 !important;
    text-align: center !important;
    font-weight: 700 !important;
}

/* 背景・ボーダー */
.bg-white-padding-xl {
    background: #ffffff !important;
    padding: 60px 0 !important;
}

.bg-white-highlight {
    background: rgb(255 255 255) !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 0px !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
    color: #000 !important;
}

.rounded-lg-overflow {
    border-radius: 12px !important;
    overflow: hidden !important;