@charset "UTF-8";

/* ============================================================================
   ファイル名: base.css
   役割: frontend.css の基礎システム（コンテナ、基本カード、共通ユーティリティ）
   依存: なし
   更新: 2024/09/29
   ============================================================================ */

/* -----------------------------------------------------------------------------
   基本コンテナシステム
   ----------------------------------------------------------------------------- */

/* メインコンテナ - WordPress詳細度対策 */
body .jph-container,
.wp-site-blocks .jph-container,
.entry-content .jph-container {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* -----------------------------------------------------------------------------
   カード基礎システム
   ----------------------------------------------------------------------------- */

/* 基本カード */
body .jph-card,
.wp-site-blocks .jph-card,
.entry-content .jph-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* -----------------------------------------------------------------------------
   共通ユーティリティ
   ----------------------------------------------------------------------------- */

/* スピナー（ローディング表示） */
.jph-spinner {
    border: 4px solid #f3f4f6 !important;
    border-top: 4px solid #d0576b !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    animation: jph-spin 1s linear infinite !important;
    margin: 16px auto !important;
}

@keyframes jph-spin {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

/* 使用済み状態 */
.jph-used {
    opacity: 0.6 !important;
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* 無効化状態 */
.jph-disabled {
    background: #d1d5db !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* -----------------------------------------------------------------------------
   エラー・警告表示
   ----------------------------------------------------------------------------- */

/* エラーメッセージ */
body .jph-error,
.wp-site-blocks .jph-error,
.entry-content .jph-error {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    color: #dc2626 !important;
}

/* 警告メッセージ */
body .jph-warning,
.wp-site-blocks .jph-warning,
.entry-content .jph-warning {
    background: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 16px 0 !important;
    font-size: 14px !important;
    color: #92400e !important;
}

/* ログインエラー */
.jph-login-error {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
}

.jph-error-message {
    color: #dc2626 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   テキストユーティリティ
   ----------------------------------------------------------------------------- */

/* 距離表示 */
.jph-distance {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin: 0 0 12px 0 !important;
}

/* 特典説明 */
.jph-benefit-desc {
    color: #4b5563 !important;
    margin: 0 0 16px 0 !important;
    font-size: 16px !important;
}

/* データなし表示 */
.jph-no-history {
    text-align: center !important;
    color: #6b7280 !important;
    margin: 32px 0 !important;
}

/* -----------------------------------------------------------------------------
   レスポンシブ対応
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
    body .jph-container,
    .wp-site-blocks .jph-container,
    .entry-content .jph-container {
        padding: 16px !important;
    }
    
    body .jph-card,
    .wp-site-blocks .jph-card,
    .entry-content .jph-card {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    body .jph-container,
    .wp-site-blocks .jph-container,
    .entry-content .jph-container {
        padding: 12px !important;
    }
}

/* -----------------------------------------------------------------------------
   アクセシビリティ - Reduced Motion 対応
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .jph-spinner {
        animation: none !important;
    }
    
    .jph-disabled {
        transition: none !important;
    }
}

/* End base.css */

/* ============================================================================
   ファイル名: buttons.css
   役割: ボタンシステム全般（プライマリ、セカンダリ、ゴースト、状態管理）
   依存: base.css
   更新: 2024/09/29
   ============================================================================ */

@charset "UTF-8";

/* -----------------------------------------------------------------------------
   ボタン基礎システム
   ----------------------------------------------------------------------------- */

/* 基本ボタンスタイル */
body .jph-button,
.wp-site-blocks .jph-button,
.entry-content .jph-button,
body .jph-btn,
.wp-site-blocks .jph-btn,
.entry-content .jph-btn {
    display: inline-block !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 44px !important;
    min-height: 44px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* -----------------------------------------------------------------------------
   ボタンバリエーション
   ----------------------------------------------------------------------------- */

/* プライマリボタン */
body .jph-primary,
.wp-site-blocks .jph-primary,
.entry-content .jph-primary,
body .jph-btn--primary,
.wp-site-blocks .jph-btn--primary,
.entry-content .jph-btn--primary {
    background: #d0576b !important;
    color: white !important;
}

body .jph-primary:hover,
.wp-site-blocks .jph-primary:hover,
.entry-content .jph-primary:hover,
body .jph-btn--primary:hover,
.wp-site-blocks .jph-btn--primary:hover,
.entry-content .jph-btn--primary:hover {
    background: #b84b5d !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(208, 87, 107, 0.3) !important;
}

/* セカンダリボタン */
body .jph-secondary,
.wp-site-blocks .jph-secondary,
.entry-content .jph-secondary,
body .jph-btn--secondary,
.wp-site-blocks .jph-btn--secondary,
.entry-content .jph-btn--secondary {
    background: #6b7280 !important;
    color: white !important;
}

body .jph-secondary:hover,
.wp-site-blocks .jph-secondary:hover,
.entry-content .jph-secondary:hover,
body .jph-btn--secondary:hover,
.wp-site-blocks .jph-btn--secondary:hover,
.entry-content .jph-btn--secondary:hover {
    background: #4b5563 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
}

/* ゴーストボタン */
body .jph-btn--ghost,
.wp-site-blocks .jph-btn--ghost,
.entry-content .jph-btn--ghost {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
}

body .jph-btn--ghost:hover,
.wp-site-blocks .jph-btn--ghost:hover,
.entry-content .jph-btn--ghost:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
    transform: translateY(-1px) !important;
}

/* 緊急ボタン */
body .jph-btn--urgent,
.wp-site-blocks .jph-btn--urgent,
.entry-content .jph-btn--urgent {
    background: #f59e0b !important;
    color: white !important;
    flex-shrink: 0 !important;
}

body .jph-btn--urgent:hover,
.wp-site-blocks .jph-btn--urgent:hover,
.entry-content .jph-btn--urgent:hover {
    background: #d97706 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* 危険ボタン */
body .jph-btn--danger,
.wp-site-blocks .jph-btn--danger,
.entry-content .jph-btn--danger {
    background: #dc2626 !important;
    color: white !important;
}

body .jph-btn--danger:hover,
.wp-site-blocks .jph-btn--danger:hover,
.entry-content .jph-btn--danger:hover {
    background: #b91c1c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

/* 成功ボタン */
body .jph-btn--success,
.wp-site-blocks .jph-btn--success,
.entry-content .jph-btn--success {
    background: #16a34a !important;
    color: white !important;
}

body .jph-btn--success:hover,
.wp-site-blocks .jph-btn--success:hover,
.entry-content .jph-btn--success:hover {
    background: #15803d !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3) !important;
}

/* -----------------------------------------------------------------------------
   ボタン状態管理
   ----------------------------------------------------------------------------- */

/* 無効化状態 */
body .jph-btn:disabled,
.wp-site-blocks .jph-btn:disabled,
.entry-content .jph-btn:disabled,
body .jph-button:disabled,
.wp-site-blocks .jph-button:disabled,
.entry-content .jph-button:disabled,
.jph-use-coupon:disabled {
    background: #d1d5db !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* アクティブ状態（押下） */
body .jph-btn:active:not(:disabled),
.wp-site-blocks .jph-btn:active:not(:disabled),
.entry-content .jph-btn:active:not(:disabled),
body .jph-button:active:not(:disabled),
.wp-site-blocks .jph-button:active:not(:disabled),
.entry-content .jph-button:active:not(:disabled) {
    transform: scale(0.98) !important;
    transition: transform 120ms ease !important;
}

/* フォーカス状態 */
body .jph-btn:focus-visible,
.wp-site-blocks .jph-btn:focus-visible,
.entry-content .jph-btn:focus-visible,
body .jph-button:focus-visible,
.wp-site-blocks .jph-button:focus-visible,
.entry-content .jph-button:focus-visible {
    outline: 2px solid #d0576b !important;
    outline-offset: 2px !important;
}

/* ローディング状態 */
body .jph-btn--loading,
.wp-site-blocks .jph-btn--loading,
.entry-content .jph-btn--loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
}

body .jph-btn--loading::after,
.wp-site-blocks .jph-btn--loading::after,
.entry-content .jph-btn--loading::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
    border: 2px solid transparent !important;
    border-top-color: currentColor !important;
    border-radius: 50% !important;
    animation: jph-btn-spin 0.6s linear infinite !important;
}

@keyframes jph-btn-spin {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

/* -----------------------------------------------------------------------------
   ボタンサイズバリエーション
   ----------------------------------------------------------------------------- */

/* 小サイズ */
body .jph-btn--small,
.wp-site-blocks .jph-btn--small,
.entry-content .jph-btn--small {
    padding: 8px 16px !important;
    font-size: 14px !important;
    min-height: 36px !important;
}

/* 大サイズ */
body .jph-btn--large,
.wp-site-blocks .jph-btn--large,
.entry-content .jph-btn--large {
    padding: 16px 32px !important;
    font-size: 18px !important;
    min-height: 52px !important;
}

/* ブロックボタン（全幅） */
body .jph-btn--block,
.wp-site-blocks .jph-btn--block,
.entry-content .jph-btn--block {
    width: 100% !important;
    display: block !important;
}

/* -----------------------------------------------------------------------------
   ボタンアイコン
   ----------------------------------------------------------------------------- */

.jph-btn__icon {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

.jph-btn--icon-only {
    padding: 12px !important;
    width: 44px !important;
}

.jph-btn--icon-only .jph-btn__icon {
    margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   ボタングループ
   ----------------------------------------------------------------------------- */

.jph-button-group {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.jph-button-group--vertical {
    flex-direction: column !important;
}

.jph-button-group .jph-btn {
    flex: 1 1 auto !important;
}

/* -----------------------------------------------------------------------------
   レスポンシブ対応
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
    body .jph-btn,
    .wp-site-blocks .jph-btn,
    .entry-content .jph-btn,
    body .jph-button,
    .wp-site-blocks .jph-button,
    .entry-content .jph-button {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
    
    body .jph-btn--small,
    .wp-site-blocks .jph-btn--small,
    .entry-content .jph-btn--small {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    .jph-button-group {
        flex-direction: column !important;
    }
    
    .jph-button-group .jph-btn {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    body .jph-btn,
    .wp-site-blocks .jph-btn,
    .entry-content .jph-btn,
    body .jph-button,
    .wp-site-blocks .jph-button,
    .entry-content .jph-button {
        padding: 14px 20px !important;
        min-height: 48px !important;
    }
}

/* -----------------------------------------------------------------------------
   Motion Preferences
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body .jph-btn,
    .wp-site-blocks .jph-btn,
    .entry-content .jph-btn,
    body .jph-button,
    .wp-site-blocks .jph-button,
    .entry-content .jph-button {
        transition: none !important;
    }
    
    body .jph-btn:hover,
    .wp-site-blocks .jph-btn:hover,
    .entry-content .jph-btn:hover,
    body .jph-button:hover,
    .wp-site-blocks .jph-button:hover,
    .entry-content .jph-button:hover {
        transform: none !important;
    }
    
    body .jph-btn--loading::after,
    .wp-site-blocks .jph-btn--loading::after,
    .entry-content .jph-btn--loading::after {
        animation: none !important;
    }
}

/* -----------------------------------------------------------------------------
   Print Styles
   ----------------------------------------------------------------------------- */
@media print {
    body .jph-btn,
    .wp-site-blocks .jph-btn,
    .entry-content .jph-btn,
    body .jph-button,
    .wp-site-blocks .jph-button,
    .entry-content .jph-button {
        border: 2px solid #000000 !important;
        color: #000000 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* End buttons.css */

/* ============================================================================
   ファイル名: cards.css
   役割: カード・メッセージシステム（クーポン、成功、ステータス表示）
   依存: base.css
   更新: 2024/09/29
   ============================================================================ */

@charset "UTF-8";

/* -----------------------------------------------------------------------------
   クーポンカードシステム
   ----------------------------------------------------------------------------- */

/* クーポンカード基礎 */
body .jph-coupon-card,
.wp-site-blocks .jph-coupon-card,
.entry-content .jph-coupon-card {
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%) !important;
    border: 2px solid #d0576b !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* クーポンカードボーダーエフェクト */
body .jph-coupon-card::before,
.wp-site-blocks .jph-coupon-card::before,
.entry-content .jph-coupon-card::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, #d0576b, #b84b5d) !important;
    border-radius: 14px !important;
    z-index: -1 !important;
}

/* クーポンカード見出し */
body .jph-coupon-card h4,
.wp-site-blocks .jph-coupon-card h4,
.entry-content .jph-coupon-card h4 {
    margin: 0 0 8px 0 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #1f2937 !important;
}

/* クーポン使用ボタン */
body .jph-use-coupon,
.wp-site-blocks .jph-use-coupon,
.entry-content .jph-use-coupon {
    width: 100% !important;
    background: #d0576b !important;
    color: white !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 12px !important;
}

body .jph-use-coupon:hover:not(:disabled),
.wp-site-blocks .jph-use-coupon:hover:not(:disabled),
.entry-content .jph-use-coupon:hover:not(:disabled) {
    background: #b84b5d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(208, 87, 107, 0.4) !important;
}

/* -----------------------------------------------------------------------------
   メッセージカード
   ----------------------------------------------------------------------------- */

/* 成功メッセージ */
body .jph-success-message,
.wp-site-blocks .jph-success-message,
.entry-content .jph-success-message {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    border: 2px solid #10b981 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

body .jph-success-message h3,
.wp-site-blocks .jph-success-message h3,
.entry-content .jph-success-message h3 {
    color: #047857 !important;
    margin: 0 0 8px 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

body .jph-success-message p,
.wp-site-blocks .jph-success-message p,
.entry-content .jph-success-message p {
    color: #065f46 !important;
    margin: 0 !important;
    font-size: 14px !important;
}

/* 緊急更新CTA */
body .jph-urgent-renewal,
.wp-site-blocks .jph-urgent-renewal,
.entry-content .jph-urgent-renewal {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%) !important;
    border: 2px solid #f59e0b !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.jph-urgent-renewal__icon {
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

.jph-urgent-renewal__text {
    flex-grow: 1 !important;
}

.jph-urgent-renewal__title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #92400e !important;
    margin: 0 0 4px 0 !important;
}

.jph-urgent-renewal__message {
    font-size: 14px !important;
    color: #92400e !important;
    margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   ステータスピル
   ----------------------------------------------------------------------------- */

/* ステータスピル基礎 */
.jph-status__pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    width: fit-content !important;
}

/* アクティブ状態 */
.jph-status__pill--active {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

/* グレース期間 */
.jph-status__pill--grace {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* 期限切れ */
.jph-status__pill--expired {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

/* 利用可能 */
.jph-status-available {
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ロック中 */
.jph-status-locked {
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* -----------------------------------------------------------------------------
   統計表示（履歴ページ用）
   ----------------------------------------------------------------------------- */

/* ステータスサマリー */
.jph-status-summary {
    display: flex !important;
    gap: 16px !important;
    margin: 16px 0 !important;
    flex-wrap: wrap !important;
}

/* 統計アイテム */
.jph-stat {
    flex: 1 !important;
    min-width: 120px !important;
    text-align: center !important;
    padding: 12px !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
}

.jph-stat-label {
    display: block !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
}

.jph-stat-value {
    display: block !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #1f2937 !important;
}

/* ランク表示 */
.jph-rank-bronze { 
    color: #cd7f32 !important; 
    font-weight: 600 !important;
}

.jph-rank-silver { 
    color: #c0c0c0 !important; 
    font-weight: 600 !important;
}

.jph-rank-gold { 
    color: #ffd700 !important; 
    font-weight: 600 !important;
}

/* -----------------------------------------------------------------------------
   履歴リスト
   ----------------------------------------------------------------------------- */

/* 履歴リストコンテナ */
.jph-history-list {
    margin-top: 16px !important;
}

/* 履歴アイテム */
.jph-history-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
}

.jph-history-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border-color: #d1d5db !important;
}

/* 履歴メイン情報 */
.jph-history-main h4 {
    margin: 0 0 4px 0 !important;
    font-size: 16px !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.jph-history-date {
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    color: #6b7280 !important;
}

.jph-history-points {
    margin: 0 !important;
    font-size: 14px !important;
    color: #059669 !important;
    font-weight: 600 !important;
}

/* -----------------------------------------------------------------------------
   レスポンシブ対応
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* ステータスサマリー */
    .jph-status-summary {
        flex-direction: column !important;
    }
    
    .jph-stat {
        min-width: 100% !important;
    }
    
    /* 履歴アイテム */
    .jph-history-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    /* 緊急更新CTA */
    body .jph-urgent-renewal,
    .wp-site-blocks .jph-urgent-renewal,
    .entry-content .jph-urgent-renewal {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    /* クーポンカード */
    body .jph-coupon-card,
    .wp-site-blocks .jph-coupon-card,
    .entry-content .jph-coupon-card {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    /* 成功メッセージ */
    body .jph-success-message,
    .wp-site-blocks .jph-success-message,
    .entry-content .jph-success-message {
        padding: 16px !important;
    }
    
    body .jph-success-message h3,
    .wp-site-blocks .jph-success-message h3,
    .entry-content .jph-success-message h3 {
        font-size: 16px !important;
    }
}

/* -----------------------------------------------------------------------------
   アクセシビリティ - Reduced Motion 対応
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body .jph-use-coupon,
    .wp-site-blocks .jph-use-coupon,
    .entry-content .jph-use-coupon,
    .jph-history-item {
        transition: none !important;
    }
    
    body .jph-use-coupon:hover:not(:disabled),
    .wp-site-blocks .jph-use-coupon:hover:not(:disabled),
    .entry-content .jph-use-coupon:hover:not(:disabled) {
        transform: none !important;
    }
}

/* -----------------------------------------------------------------------------
   印刷用スタイル
   ----------------------------------------------------------------------------- */

@media print {
    body .jph-coupon-card,
    .wp-site-blocks .jph-coupon-card,
    .entry-content .jph-coupon-card,
    body .jph-success-message,
    .wp-site-blocks .jph-success-message,
    .entry-content .jph-success-message {
        border: 2px solid #000000 !important;
        background: white !important;
    }
    
    body .jph-use-coupon,
    .wp-site-blocks .jph-use-coupon,
    .entry-content .jph-use-coupon {
        display: none !important;
    }
}

/* End cards.css */

/* ============================================================================
   ファイル名: forms.css
   役割: フォーム・入力システム（T-LOGIN、設定フォーム、バリデーション）
   依存: base.css, buttons.css
   更新: 2024/09/29
   ============================================================================ */

@charset "UTF-8";

/* -----------------------------------------------------------------------------
   フォームコンテナ
   ----------------------------------------------------------------------------- */

/* ログイン・設定コンテナ */
body .jph-login-container,
.wp-site-blocks .jph-login-container,
.entry-content .jph-login-container,
body .jph-settings-container,
.wp-site-blocks .jph-settings-container,
.entry-content .jph-settings-container {
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* -----------------------------------------------------------------------------
   フォームグループ
   ----------------------------------------------------------------------------- */

/* フォームグループ基礎 */
body .jph-form-group,
.wp-site-blocks .jph-form-group,
.entry-content .jph-form-group {
    margin-bottom: 20px !important;
}

/* ラベル */
body .jph-form-group label,
.wp-site-blocks .jph-form-group label,
.entry-content .jph-form-group label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
}

/* 必須マーク */
body .jph-form-group label .required,
.wp-site-blocks .jph-form-group label .required,
.entry-content .jph-form-group label .required {
    color: #dc2626 !important;
    margin-left: 4px !important;
}

/* -----------------------------------------------------------------------------
   入力フィールド
   ----------------------------------------------------------------------------- */

/* 基本入力フィールド */
body .jph-input,
.wp-site-blocks .jph-input,
.entry-content .jph-input,
body input.jph-input,
.wp-site-blocks input.jph-input,
.entry-content input.jph-input,
body textarea.jph-input,
.wp-site-blocks textarea.jph-input,
.entry-content textarea.jph-input,
body select.jph-input,
.wp-site-blocks select.jph-input,
.entry-content select.jph-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #111827 !important;
    line-height: 1.5 !important;
}

/* テキストエリア */
body textarea.jph-input,
.wp-site-blocks textarea.jph-input,
.entry-content textarea.jph-input {
    min-height: 100px !important;
    resize: vertical !important;
}

/* セレクトボックス */
body select.jph-input,
.wp-site-blocks select.jph-input,
.entry-content select.jph-input {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
}

/* -----------------------------------------------------------------------------
   入力フィールド状態
   ----------------------------------------------------------------------------- */

/* フォーカス状態 */
body .jph-input:focus,
.wp-site-blocks .jph-input:focus,
.entry-content .jph-input:focus,
body input.jph-input:focus,
.wp-site-blocks input.jph-input:focus,
.entry-content input.jph-input:focus,
body textarea.jph-input:focus,
.wp-site-blocks textarea.jph-input:focus,
.entry-content textarea.jph-input:focus,
body select.jph-input:focus,
.wp-site-blocks select.jph-input:focus,
.entry-content select.jph-input:focus {
    outline: 2px solid #d0576b !important;
    outline-offset: 2px !important;
    border-color: #d0576b !important;
    box-shadow: 0 0 0 3px rgba(208, 87, 107, 0.1) !important;
}

/* フォーカス可視化（キーボードナビゲーション） */
body .jph-input:focus-visible,
.wp-site-blocks .jph-input:focus-visible,
.entry-content .jph-input:focus-visible {
    outline: 2px solid #d0576b !important;
    outline-offset: 2px !important;
}

/* 無効化状態 */
body .jph-input:disabled,
.wp-site-blocks .jph-input:disabled,
.entry-content .jph-input:disabled,
body input.jph-input:disabled,
.wp-site-blocks input.jph-input:disabled,
.entry-content input.jph-input:disabled,
body textarea.jph-input:disabled,
.wp-site-blocks textarea.jph-input:disabled,
.entry-content textarea.jph-input:disabled,
body select.jph-input:disabled,
.wp-site-blocks select.jph-input:disabled,
.entry-content select.jph-input:disabled {
    background: #f9fafb !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* 読み取り専用 */
body .jph-input:read-only,
.wp-site-blocks .jph-input:read-only,
.entry-content .jph-input:read-only {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
}

/* -----------------------------------------------------------------------------
   バリデーション状態
   ----------------------------------------------------------------------------- */

/* エラー状態 */
body .jph-form-group.error .jph-input,
.wp-site-blocks .jph-form-group.error .jph-input,
.entry-content .jph-form-group.error .jph-input,
body .jph-form-group.error input.jph-input,
.wp-site-blocks .jph-form-group.error input.jph-input,
.entry-content .jph-form-group.error input.jph-input {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

body .jph-form-group.error .jph-input:focus,
.wp-site-blocks .jph-form-group.error .jph-input:focus,
.entry-content .jph-form-group.error .jph-input:focus {
    outline-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* エラーメッセージ */
body .jph-form-group .jph-error-text,
.wp-site-blocks .jph-form-group .jph-error-text,
.entry-content .jph-form-group .jph-error-text {
    color: #dc2626 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    display: block !important;
}

/* 成功状態 */
body .jph-form-group.success .jph-input,
.wp-site-blocks .jph-form-group.success .jph-input,
.entry-content .jph-form-group.success .jph-input,
body .jph-form-group.success input.jph-input,
.wp-site-blocks .jph-form-group.success input.jph-input,
.entry-content .jph-form-group.success input.jph-input {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1) !important;
}

body .jph-form-group.success .jph-input:focus,
.wp-site-blocks .jph-form-group.success .jph-input:focus,
.entry-content .jph-form-group.success .jph-input:focus {
    outline-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important;
}

/* 成功メッセージ */
body .jph-form-group .jph-success-text,
.wp-site-blocks .jph-form-group .jph-success-text,
.entry-content .jph-form-group .jph-success-text {
    color: #16a34a !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    display: block !important;
}

/* ヘルプテキスト */
body .jph-form-group .jph-help-text,
.wp-site-blocks .jph-form-group .jph-help-text,
.entry-content .jph-form-group .jph-help-text {
    color: #6b7280 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    display: block !important;
}

/* -----------------------------------------------------------------------------
   フォームアクション
   ----------------------------------------------------------------------------- */

/* フォームアクションエリア */
body .jph-form-actions,
.wp-site-blocks .jph-form-actions,
.entry-content .jph-form-actions {
    margin-top: 24px !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body .jph-form-actions .jph-btn,
.wp-site-blocks .jph-form-actions .jph-btn,
.entry-content .jph-form-actions .jph-btn {
    flex: 1 1 auto !important;
}

/* -----------------------------------------------------------------------------
   設定セクション
   ----------------------------------------------------------------------------- */

/* 設定セクション */
body .jph-settings-section,
.wp-site-blocks .jph-settings-section,
.entry-content .jph-settings-section {
    margin-bottom: 32px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

body .jph-settings-section:last-child,
.wp-site-blocks .jph-settings-section:last-child,
.entry-content .jph-settings-section:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

body .jph-settings-section h3,
.wp-site-blocks .jph-settings-section h3,
.entry-content .jph-settings-section h3 {
    margin: 0 0 16px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

body .jph-settings-section p,
.wp-site-blocks .jph-settings-section p,
.entry-content .jph-settings-section p {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin: 0 0 16px 0 !important;
}

/* -----------------------------------------------------------------------------
   ログインリンク
   ----------------------------------------------------------------------------- */

/* ログインリンクエリア */
body .jph-login-links,
.wp-site-blocks .jph-login-links,
.entry-content .jph-login-links {
    text-align: center !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f3f4f6 !important;
}

/* パスワード忘れリンク */
body .jph-forgot-password,
.wp-site-blocks .jph-forgot-password,
.entry-content .jph-forgot-password {
    color: #6b7280 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color 150ms ease !important;
}

body .jph-forgot-password:hover,
.wp-site-blocks .jph-forgot-password:hover,
.entry-content .jph-forgot-password:hover {
    color: #d0576b !important;
    text-decoration: underline !important;
}

/* 新規登録リンク */
body .jph-register-link,
.wp-site-blocks .jph-register-link,
.entry-content .jph-register-link {
    color: #d0576b !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: color 150ms ease !important;
}

body .jph-register-link:hover,
.wp-site-blocks .jph-register-link:hover,
.entry-content .jph-register-link:hover {
    color: #b84b5d !important;
    text-decoration: underline !important;
}

/* -----------------------------------------------------------------------------
   チェックボックス・ラジオボタン
   ----------------------------------------------------------------------------- */

/* チェックボックス・ラジオコンテナ */
body .jph-checkbox,
.wp-site-blocks .jph-checkbox,
.entry-content .jph-checkbox,
body .jph-radio,
.wp-site-blocks .jph-radio,
.entry-content .jph-radio {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

body .jph-checkbox input[type="checkbox"],
.wp-site-blocks .jph-checkbox input[type="checkbox"],
.entry-content .jph-checkbox input[type="checkbox"],
body .jph-radio input[type="radio"],
.wp-site-blocks .jph-radio input[type="radio"],
.entry-content .jph-radio input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: #d0576b !important;
}

body .jph-checkbox label,
.wp-site-blocks .jph-checkbox label,
.entry-content .jph-checkbox label,
body .jph-radio label,
.wp-site-blocks .jph-radio label,
.entry-content .jph-radio label {
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #374151 !important;
}

/* -----------------------------------------------------------------------------
   レスポンシブ対応
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
    body .jph-login-container,
    .wp-site-blocks .jph-login-container,
    .entry-content .jph-login-container,
    body .jph-settings-container,
    .wp-site-blocks .jph-settings-container,
    .entry-content .jph-settings-container {
        padding: 20px !important;
    }
    
    body .jph-form-actions,
    .wp-site-blocks .jph-form-actions,
    .entry-content .jph-form-actions {
        flex-direction: column !important;
    }
    
    body .jph-form-actions .jph-btn,
    .wp-site-blocks .jph-form-actions .jph-btn,
    .entry-content .jph-form-actions .jph-btn {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    body .jph-login-container,
    .wp-site-blocks .jph-login-container,
    .entry-content .jph-login-container,
    body .jph-settings-container,
    .wp-site-blocks .jph-settings-container,
    .entry-content .jph-settings-container {
        padding: 16px !important;
        margin: 16px !important;
    }
    
    body .jph-form-group,
    .wp-site-blocks .jph-form-group,
    .entry-content .jph-form-group {
        margin-bottom: 16px !important;
    }
    
    body .jph-settings-section,
    .wp-site-blocks .jph-settings-section,
    .entry-content .jph-settings-section {
        margin-bottom: 24px !important;
        padding-bottom: 16px !important;
    }
}

/* -----------------------------------------------------------------------------
   アクセシビリティ - Reduced Motion 対応
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body .jph-input,
    .wp-site-blocks .jph-input,
    .entry-content .jph-input,
    body .jph-forgot-password,
    .wp-site-blocks .jph-forgot-password,
    .entry-content .jph-forgot-password,
    body .jph-register-link,
    .wp-site-blocks .jph-register-link,
    .entry-content .jph-register-link {
        transition: none !important;
    }
}

/* End forms.css */

/* ============================================================================
   ファイル名: pages.css
   役割: ページ固有スタイル（アカウント、履歴、プロフィール）
   依存: base.css, buttons.css, cards.css
   更新: 2024/09/29
   ============================================================================ */

@charset "UTF-8";

/* =============================================================================
   アカウントページ専用スタイル
   ============================================================================= */

/* -----------------------------------------------------------------------------
   アカウントメインコンテナ
   ----------------------------------------------------------------------------- */

body.logged-in .jph-account,
.wp-site-blocks .jph-account,
.entry-content .jph-account {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   ステータス表示
   ----------------------------------------------------------------------------- */

body.logged-in .jph-status,
.wp-site-blocks .jph-status,
.entry-content .jph-status {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    padding: 16px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.jph-status__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.jph-status__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

.jph-status__date {
    font-size: 13px !important;
    color: #9ca3af !important;
    margin: 4px 0 0 0 !important;
}

/* -----------------------------------------------------------------------------
   プロフィールセクション
   ----------------------------------------------------------------------------- */

body.logged-in .jph-profile,
.wp-site-blocks .jph-profile,
.entry-content .jph-profile {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.jph-profile__title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 0 20px 0 !important;
    text-align: center !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.jph-profile__subtitle {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 0 16px 0 !important;
    text-align: center !important;
}

/* -----------------------------------------------------------------------------
   情報行
   ----------------------------------------------------------------------------- */

body.logged-in .jph-row,
.wp-site-blocks .jph-row,
.entry-content .jph-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    gap: 12px !important;
}

body.logged-in .jph-row:last-child,
.wp-site-blocks .jph-row:last-child,
.entry-content .jph-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.jph-row__label {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

.jph-row__value {
    font-size: 16px !important;
    color: #111827 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    word-break: break-all !important;
}

.jph-row__actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* -----------------------------------------------------------------------------
   コピーボタン
   ----------------------------------------------------------------------------- */

body.logged-in .jph-copy,
.wp-site-blocks .jph-copy,
.entry-content .jph-copy {
    background: none !important;
    border: none !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 6px !important;
    transition: all 120ms ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

body.logged-in .jph-copy:hover,
.wp-site-blocks .jph-copy:hover,
.entry-content .jph-copy:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

body.logged-in .jph-copy:active,
.wp-site-blocks .jph-copy:active,
.entry-content .jph-copy:active {
    transform: scale(0.95) !important;
}

.jph-copy[data-copied="true"] {
    color: #059669 !important;
}

.jph-copy__icon {
    font-size: 14px !important;
}

.jph-copy__text {
    transition: all 200ms ease !important;
}

/* -----------------------------------------------------------------------------
   アクションセクション
   ----------------------------------------------------------------------------- */

body.logged-in .jph-actions,
.wp-site-blocks .jph-actions,
.entry-content .jph-actions {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
}

.jph-actions__title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 0 16px 0 !important;
}

.jph-actions__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.jph-actions__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

/* -----------------------------------------------------------------------------
   法務リンクセクション
   ----------------------------------------------------------------------------- */

body.logged-in .jph-legal,
.wp-site-blocks .jph-legal,
.entry-content .jph-legal {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px !important;
    text-align: center !important;
    margin-bottom: 16px !important;
}

.jph-legal__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 0 0 12px 0 !important;
}

.jph-legal__links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.logged-in .jph-legal a,
.wp-site-blocks .jph-legal a,
.entry-content .jph-legal a {
    color: #6b7280 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    margin: 0 !important;
    transition: color 120ms ease !important;
}

body.logged-in .jph-legal a:hover,
.wp-site-blocks .jph-legal a:hover,
.entry-content .jph-legal a:hover {
    color: #374151 !important;
    text-decoration: underline !important;
}

.jph-legal__separator {
    color: #d1d5db !important;
    font-size: 14px !important;
}

/* -----------------------------------------------------------------------------
   ログアウトセクション
   ----------------------------------------------------------------------------- */

body.logged-in .jph-logout,
.wp-site-blocks .jph-logout,
.entry-content .jph-logout {
    text-align: center !important;
    padding: 20px !important;
}

.jph-logout__btn {
    color: #dc2626 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 120ms ease !important;
}

.jph-logout__btn:hover {
    color: #b91c1c !important;
    text-decoration: underline !important;
}

/* =============================================================================
   履歴ページ専用スタイル
   ============================================================================= */

/* -----------------------------------------------------------------------------
   履歴ヘッダー
   ----------------------------------------------------------------------------- */

.jph-history-header {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
}

.jph-history-header__title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 0 8px 0 !important;
}

.jph-history-header__subtitle {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   履歴フィルター
   ----------------------------------------------------------------------------- */

.jph-history-filters {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.jph-filter-btn {
    padding: 8px 16px !important;
    border-radius: 20px !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
}

.jph-filter-btn:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
}

.jph-filter-btn.active {
    background: #d0576b !important;
    color: white !important;
    border-color: #d0576b !important;
}

/* -----------------------------------------------------------------------------
   履歴空表示
   ----------------------------------------------------------------------------- */

.jph-history-empty {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 48px 24px !important;
    text-align: center !important;
}

.jph-history-empty__icon {
    font-size: 48px !important;
    color: #d1d5db !important;
    margin-bottom: 16px !important;
}

.jph-history-empty__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 0 0 8px 0 !important;
}

.jph-history-empty__message {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   ポイント残高表示
   ----------------------------------------------------------------------------- */

.jph-points-balance {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 2px solid #f59e0b !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}

.jph-points-balance__label {
    font-size: 14px !important;
    color: #92400e !important;
    margin: 0 0 8px 0 !important;
    font-weight: 600 !important;
}

.jph-points-balance__value {
    font-size: 36px !important;
    font-weight: bold !important;
    color: #92400e !important;
    margin: 0 !important;
}

.jph-points-balance__unit {
    font-size: 18px !important;
    margin-left: 4px !important;
}

/* =============================================================================
   レスポンシブ対応
   ============================================================================= */

@media (max-width: 768px) {
    /* アカウントページ */
    body.logged-in .jph-account,
    .wp-site-blocks .jph-account,
    .entry-content .jph-account {
        padding: 16px !important;
    }
    
    body.logged-in .jph-profile,
    .wp-site-blocks .jph-profile,
    .entry-content .jph-profile,
    body.logged-in .jph-actions,
    .wp-site-blocks .jph-actions,
    .entry-content .jph-actions,
    body.logged-in .jph-legal,
    .wp-site-blocks .jph-legal,
    .entry-content .jph-legal {
        padding: 16px !important;
    }
    
    body.logged-in .jph-row,
    .wp-site-blocks .jph-row,
    .entry-content .jph-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .jph-row__label {
        min-width: auto !important;
    }
    
    .jph-row__actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    /* アクショングリッド */
    .jph-actions__grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 履歴フィルター */
    .jph-history-filters {
        flex-direction: column !important;
    }
    
    .jph-filter-btn {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* ポイント残高 */
    .jph-points-balance__value {
        font-size: 28px !important;
    }
}

@media (max-width: 480px) {
    body.logged-in .jph-account,
    .wp-site-blocks .jph-account,
    .entry-content .jph-account {
        padding: 12px !important;
    }
    
    body.logged-in .jph-profile,
    .wp-site-blocks .jph-profile,
    .entry-content .jph-profile,
    body.logged-in .jph-actions,
    .wp-site-blocks .jph-actions,
    .entry-content .jph-actions {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .jph-profile__title {
        font-size: 18px !important;
    }
    
    .jph-history-header,
    .jph-history-empty {
        padding: 20px 16px !important;
    }
}

/* =============================================================================
   アクセシビリティ - Reduced Motion 対応
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    body.logged-in .jph-copy,
    .wp-site-blocks .jph-copy,
    .entry-content .jph-copy,
    body.logged-in .jph-legal a,
    .wp-site-blocks .jph-legal a,
    .entry-content .jph-legal a,
    .jph-logout__btn,
    .jph-filter-btn {
        transition: none !important;
    }
    
    body.logged-in .jph-copy:active,
    .wp-site-blocks .jph-copy:active,
    .entry-content .jph-copy:active {
        transform: none !important;
    }
}

/* =============================================================================
   印刷用スタイル
   ============================================================================= */

@media print {
    body.logged-in .jph-actions,
    .wp-site-blocks .jph-actions,
    .entry-content .jph-actions,
    body.logged-in .jph-logout,
    .wp-site-blocks .jph-logout,
    .entry-content .jph-logout,
    body.logged-in .jph-copy,
    .wp-site-blocks .jph-copy,
    .entry-content .jph-copy {
        display: none !important;
    }
    
    body.logged-in .jph-profile,
    .wp-site-blocks .jph-profile,
    .entry-content .jph-profile,
    body.logged-in .jph-legal,
    .wp-site-blocks .jph-legal,
    .entry-content .jph-legal {
        border: 2px solid #000000 !important;
        box-shadow: none !important;
    }
}

/* ログインカード */
.jph-login-card {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.jph-form-title {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}

/* エラー表示（1行） */
.jph-form-error {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #fee;
    border-left: 4px solid #c00;
    border-radius: 4px;
    color: #c00;
    font-size: 0.875rem;
}

.jph-form-error:focus {
    outline: 2px solid #c00;
    outline-offset: 2px;
}

/* フォームグループ */
.jph-form-group {
    margin-bottom: 1rem;
}

.jph-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.jph-form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.jph-form-group input:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    border-color: #007bff;
}

/* ボタン */
.jph-btn-primary {
    width: 100%;
    padding: 0.875rem;
    margin-top: 1rem;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    min-height: 44px; /* タップ領域確保 */
}

.jph-btn-primary:hover:not(:disabled) {
    background: #0056b3;
}

.jph-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.jph-btn-primary:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* ボタン内スピナー */
.jph-btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.jph-spinner {
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}

.jph-spinner circle {
    stroke: #fff;
    stroke-dasharray: 50;
    stroke-dashoffset: 25;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Reduced Motion 対応 */
@media (prefers-reduced-motion: reduce) {
    .jph-spinner {
        animation: none;
    }
}

/* フォームフッター */
.jph-form-footer {
    margin-top: 1rem;
    text-align: center;
}

.jph-form-footer a {
    color: #007bff;
    text-decoration: none;
    font-size: 0.875rem;
}

.jph-form-footer a:hover {
    text-decoration: underline;
}

/* 390x844 レスポンシブ */
@media (max-width: 400px) {
    .jph-login-card {
        margin: 1rem;
        padding: 1.5rem 1rem;
    }
}

/* =============================================================================
   T1拡張: ログインフォーム専用スタイル（REST API統合対応）
   ============================================================================= */

/* ログインカード */
body .jph-login-card,
.wp-site-blocks .jph-login-card,
.entry-content .jph-login-card {
    max-width: 400px !important;
    margin: 32px auto !important;
    padding: 32px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* フォーム本体 */
body .jph-form,
.wp-site-blocks .jph-form,
.entry-content .jph-form,
body #jph-login-form,
.wp-site-blocks #jph-login-form,
.entry-content #jph-login-form {
    margin: 0 !important;
}

/* フォームタイトル */
body .jph-form-title,
.wp-site-blocks .jph-form-title,
.entry-content .jph-form-title {
    margin: 0 0 24px 0 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #111827 !important;
}

/* エラー表示（1行形式） */
body .jph-form-error,
.wp-site-blocks .jph-form-error,
.entry-content .jph-form-error,
body #jph-login-error,
.wp-site-blocks #jph-login-error,
.entry-content #jph-login-error {
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    background: #fef2f2 !important;
    border-left: 4px solid #dc2626 !important;
    border-radius: 4px !important;
    color: #dc2626 !important;
    font-size: 14px !important;
}

body .jph-form-error:focus,
.wp-site-blocks .jph-form-error:focus,
.entry-content .jph-form-error:focus {
    outline: 2px solid #dc2626 !important;
    outline-offset: 2px !important;
}

/* ログインフォーム用のフォームグループ上書き */
body .jph-login-card .jph-form-group,
.wp-site-blocks .jph-login-card .jph-form-group,
.entry-content .jph-login-card .jph-form-group {
    margin-bottom: 16px !important;
}

body .jph-login-card .jph-form-group label,
.wp-site-blocks .jph-login-card .jph-form-group label,
.entry-content .jph-login-card .jph-form-group label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    font-size: 14px !important;
}

body .jph-login-card .jph-form-group input,
.wp-site-blocks .jph-login-card .jph-form-group input,
.entry-content .jph-login-card .jph-form-group input {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}

body .jph-login-card .jph-form-group input:focus,
.wp-site-blocks .jph-login-card .jph-form-group input:focus,
.entry-content .jph-login-card .jph-form-group input:focus {
    outline: 2px solid #d0576b !important;
    outline-offset: 2px !important;
    border-color: #d0576b !important;
}

/* プライマリボタン（ローディング対応） */
body .jph-btn-primary,
.wp-site-blocks .jph-btn-primary,
.entry-content .jph-btn-primary {
    width: 100% !important;
    padding: 14px !important;
    margin-top: 16px !important;
    background: #d0576b !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    position: relative !important;
    min-height: 48px !important;
    transition: background 150ms ease !important;
}

body .jph-btn-primary:hover:not(:disabled),
.wp-site-blocks .jph-btn-primary:hover:not(:disabled),
.entry-content .jph-btn-primary:hover:not(:disabled) {
    background: #b84b5d !important;
}

body .jph-btn-primary:disabled,
.wp-site-blocks .jph-btn-primary:disabled,
.entry-content .jph-btn-primary:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

body .jph-btn-primary:focus,
.wp-site-blocks .jph-btn-primary:focus,
.entry-content .jph-btn-primary:focus {
    outline: 2px solid #b84b5d !important;
    outline-offset: 2px !important;
}

/* ボタンテキスト・スピナー制御 */
body .jph-btn-text,
.wp-site-blocks .jph-btn-text,
.entry-content .jph-btn-text {
    transition: opacity 150ms ease !important;
}

body .jph-btn-spinner,
.wp-site-blocks .jph-btn-spinner,
.entry-content .jph-btn-spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: none !important;
}

/* スピナーSVG */
body .jph-btn-spinner .jph-spinner,
.wp-site-blocks .jph-btn-spinner .jph-spinner,
.entry-content .jph-btn-spinner .jph-spinner {
    width: 20px !important;
    height: 20px !important;
    animation: jph-login-spin 0.8s linear infinite !important;
}

body .jph-btn-spinner .jph-spinner circle,
.wp-site-blocks .jph-btn-spinner .jph-spinner circle,
.entry-content .jph-btn-spinner .jph-spinner circle {
    stroke: #fff !important;
    stroke-dasharray: 50 !important;
    stroke-dashoffset: 25 !important;
    fill: none !important;
}

@keyframes jph-login-spin {
    to { 
        transform: rotate(360deg); 
    }
}

/* フォームフッター */
body .jph-form-footer,
.wp-site-blocks .jph-form-footer,
.entry-content .jph-form-footer {
    margin-top: 16px !important;
    text-align: center !important;
    padding-top: 16px !important;
    border-top: 1px solid #f3f4f6 !important;
}

body .jph-form-footer a,
.wp-site-blocks .jph-form-footer a,
.entry-content .jph-form-footer a {
    color: #6b7280 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color 150ms ease !important;
}

body .jph-form-footer a:hover,
.wp-site-blocks .jph-form-footer a:hover,
.entry-content .jph-form-footer a:hover {
    color: #d0576b !important;
    text-decoration: underline !important;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
    body .jph-login-card,
    .wp-site-blocks .jph-login-card,
    .entry-content .jph-login-card {
        margin: 16px !important;
        padding: 24px 16px !important;
    }
    
    body .jph-form-title,
    .wp-site-blocks .jph-form-title,
    .entry-content .jph-form-title {
        font-size: 20px !important;
    }
}

/* Reduced Motion 対応 */
@media (prefers-reduced-motion: reduce) {
    body .jph-btn-spinner .jph-spinner,
    .wp-site-blocks .jph-btn-spinner .jph-spinner,
    .entry-content .jph-btn-spinner .jph-spinner {
        animation: none !important;
    }
    
    body .jph-btn-text,
    .wp-site-blocks .jph-btn-text,
    .entry-content .jph-btn-text,
    body .jph-btn-primary,
    .wp-site-blocks .jph-btn-primary,
    .entry-content .jph-btn-primary,
    body .jph-form-footer a,
    .wp-site-blocks .jph-form-footer a,
    .entry-content .jph-form-footer a {
        transition: none !important;
    }
}

/* End T1 Login Form Styles */

/* End pages.css */