/* レスポンシブデザイン用のプレビュー表示 */

/* デスクトップ表示（デフォルト） */
.preview-section {
    /* 通常の表示 */
}

/* モバイル表示（768px以下） */
@media (max-width: 768px) {

    .main-container {
        margin-bottom: 200px;
    }

    .preview-section {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
        margin: 0 !important;
        max-width: 200px;
        width: 200px;
    }

    .preview-section .card-custom {
        margin-bottom: 0 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        overflow: hidden;
    }

    .preview-section .card-header-custom {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .preview-section .card-header-custom h5 {
        font-size: 0.875rem;
        margin: 0;
    }

    .preview-section .card-body {
        padding: 0.75rem;
        overflow: hidden;
    }

    .preview-section .business-card-preview {
        width: 100%;
        max-width: 160px;
        height: 96px;
        margin: 0 auto 0.5rem auto;
        overflow: hidden;
        box-sizing: border-box;
    }

    .preview-section .business-card-preview > div {
        padding: 8px !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .preview-section #previewName {
        font-size: 10px !important;
        margin-bottom: 5px !important;
        word-wrap: break-word;
        overflow: hidden;
    }

    .preview-section #previewNameEnglish {
        font-size: 7px !important;
        margin-top: 3px !important;
        word-wrap: break-word;
        overflow: hidden;
    }

    .preview-section #previewQuantity,
    .preview-section #previewDelivery {
        font-size: 6px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .preview-section .text-muted {
        font-size: 0.65rem;
        overflow: hidden;
    }

    /* アイコンを小さく */
    .preview-section .fa-eye {
        font-size: 0.75rem;
    }
}