body{background:#f8f9fa}.required{color:red;font-size:.9em;margin-left:.3em}.rating-container .star-rating .star{font-size:2em;color:#e4e5e9;cursor:pointer}.rating-container .star-rating .star.filled{color:#ffc107}

/* 全ての画像でブラウザの自動回転を無効化 */
img {
    image-orientation: from-image;
    -webkit-image-orientation: from-image;
    -moz-image-orientation: from-image;
    -ms-image-orientation: from-image;
    -o-image-orientation: from-image;
}

/* レビュー画像専用の向き制御 */
.review-image,
.carousel-item img {
    image-orientation: none !important;
    -webkit-image-orientation: none !important;
    -moz-image-orientation: none !important;
    -ms-image-orientation: none !important;
    -o-image-orientation: none !important;
    transform: rotate(0deg) !important;
}

/* プレビュー画像は回転を許可 */
.preview-image {
    image-orientation: none !important;
    -webkit-image-orientation: none !important;
    -moz-image-orientation: none !important;
    -ms-image-orientation: none !important;
    -o-image-orientation: none !important;
    /* transformは削除してJavaScriptによる回転を許可 */
}

.review-image{
    max-width:100%;
    max-height:250px;
    object-fit:contain; /* coverからcontainに変更してつぶれを防止 */
    /* アスペクト比を固定せず、元画像の比率を尊重 */
    width: 100%;
    height: auto;
    background-color: #f8f9fa; /* 余白部分の背景色 */
    /* ブラウザの自動回転を無効化 */
    image-orientation: none;
}

/* 投稿ボタンの無効化スタイル */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* カルーセル画像の横向き表示最適化 */
.carousel-inner {
    border-radius: 0.375rem;
    overflow: hidden;
    margin: 0 auto; /* 中央寄せ */
}

.carousel-item img {
    width: 100%;
    min-height: 200px;
    max-height: 300px;
    object-fit: contain; /* つぶれを防止 */
    object-position: center;
    background-color: #f8f9fa; /* 余白部分の背景色 */
    /* ブラウザの自動回転を無効化 */
    image-orientation: none;
}

/* 画像プレビューのスタイル */
#image-preview {
    border: 1px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 10px;
    background-color: #f8f9fa;
}

#image-preview:empty {
    display: none;
}

/* 画像プレビューアイテムのスタイル */
.image-preview-item {
    transition: transform 0.3s ease;
}

.preview-image {
    transition: transform 0.3s ease;
}

.rotate-btn,
.remove-btn {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.image-preview-item:hover .rotate-btn,
.image-preview-item:hover .remove-btn {
    opacity: 1;
}

.rotate-btn:hover {
    background-color: #5a6268 !important;
}

.remove-btn:hover {
    background-color: #c82333 !important;
}

/* レスポンシブレイアウト - 画面サイズに応じてレイアウト変更 */

/* 長文レビューのスタイル */
.review-long-content {
    flex-direction: column;
}

@media (min-width: 992px) {
    /* 大画面での長文レビュー */
    .review-long-content {
        flex-direction: row;
    }
    
    /* 画像コンテナの統一サイズ（縦並び・カルーセル共通） */
    .review-long-content .review-image-container,
    .review-short-content .review-image-container {
        flex: 0 0 300px;
        max-width: 300px;
    }
    
    /* 縦並び表示のスタイル */
    .review-images-vertical.vertical-layout {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: 600px;
        overflow-y: auto;
        width: 300px; /* 明示的に幅を指定 */
    }
    
    .review-images-vertical.vertical-layout img {
        max-height: 180px;
        object-fit: contain;
        background-color: #f8f9fa;
        border-radius: 0.375rem;
        margin-bottom: 8px;
        /* ブラウザの自動回転を無効化 */
        image-orientation: none;
    }
    
    /* カルーセル表示のスタイル */
    .review-short-content .review-images-vertical,
    .carousel-inner {
        width: 300px; /* 縦並び表示と同じ幅に統一 */
        max-width: 300px;
    }
}

@media (max-width: 991px) {
    /* 小画面では常にカルーセル表示 */
    .review-long-content {
        flex-direction: column;
    }
    
    .review-image-container {
        margin: 20px auto 15px; /* 上部余白を統一 */
        max-width: 100%; /* 小画面では全幅使用 */
    }
    
    .carousel-inner {
        max-width: 100%; /* 小画面では全幅使用 */
    }
    
    .carousel-item img {
        max-height: 250px;
    }
}

/* 画像コンテナの基本スタイル */
.review-image-container {
    position: relative;
    margin: 20px auto 0; /* 上部に20pxの余白を追加 */
}

/* 縦並び表示用のスクロールバーのスタイル */
.review-images-vertical.vertical-layout::-webkit-scrollbar {
    width: 6px;
}

.review-images-vertical.vertical-layout::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.review-images-vertical.vertical-layout::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.review-images-vertical.vertical-layout::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}