/* ▼星評価について */
/* ☆のフォント */
.rating-system1 {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    font-size: 20px;
    /* サイズを小さく */
    letter-spacing: -2px;
    /* 文字間隔をマイナスに */
}

/* ☆の評価一覧のフォント */
.rating-system2 {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    font-size: 0.9rem;
    letter-spacing: -1px;
    /* 文字間隔をマイナスに */
}

/* ☆の重なり */
.rating-star {
    position: relative;
    display: inline-block;
    line-height: 1;
    margin-right: -2px;
    /* マイナスマージンで重ねる */
}

/* 右側(評価別内訳)の星のサイズと間隔を調整 */
.review-breakdown-item .rating-system1 {
    font-size: 16px;
    /* 右側の星をさらに小さく */
    letter-spacing: -10px;
    /* -2px から -4px に変更 */
}

.review-breakdown-item .rating-star {
    margin-right: -4px;
    /* -2px から -4px に変更 */
}

/* 最後の星の右マージンを削除 */
.rating-star:last-child {
    margin-right: 0;
}

/* 背景の☆(白抜き)境界線 */
.rating-star .empty {
    color: #ff9320;
}

/* 塗りつぶしの★ */
.rating-star .fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #ff9320;
    white-space: nowrap;
}

/* テキストのフォント */
.rating-text1 {
    margin-left: 10px;
    font-size: 16px;
    color: #000;
}

/* テキストのフォント */
.rating-text2 {
    margin-left: 6px;
    font-size: 15px;
    color: #818181;
}

/* テキストのフォント */
.rating-text3 {
    margin-left: 24px;
    font-size: 13px;
    color: #818181;
}

/* ▲星評価について */

/* ▼レビュー表示_レイアウト */
/* レビュー全体のコンテナ */
.review-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 15px;
}

/* 左側: レビュー総合評価 */
.review-summary {
    flex: 0 0 auto;
    min-width: 220px;
}

.review-summary h3 {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* 右側: 評価別の内訳 */
.review-breakdown {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 3px;
    margin-left: 150px;
}

.review-breakdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-breakdown-item .rating-system1 {
    flex-shrink: 0;
    width: 15px;
    /* 15px から 60px に変更（星がより詰まるので幅を確保） */
    /* 星の表示エリアの幅 */
}

.review-breakdown-item progress {
    flex: 0 0 auto;
    /* flexを無効化して固定幅に */
    width: 150px;
    /* 固定幅で右端を揃える */
    height: 14px;
    border-radius: 7px;
    border: 1px solid #e0e0e0;
}

.review-breakdown-item progress::-webkit-progress-bar {
    background-color: #f5f5f5;
    border-radius: 7px;
}

.review-breakdown-item progress::-webkit-progress-value {
    background-color: #ff9320;
    border-radius: 7px;
}

.review-breakdown-item progress::-moz-progress-bar {
    background-color: #ff9320;
    border-radius: 7px;
}

/* 件数表示 */
.review-breakdown-item .count {
    flex-shrink: 0;
    min-width: 40px;
    text-align: right;
    color: #818181;
    font-size: 13px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .review-container {
        flex-direction: column;
        gap: 20px;
    }

    .review-summary {
        min-width: 100%;
    }

    .rating-system1 {
        font-size: 18px;
    }

    .review-breakdown {
        margin-left: 0;
        /* モバイルではマージンをリセット */
    }

    .review-breakdown-item .rating-system1 {
        width: auto;
        font-size: 16px;
    }

    .review-breakdown-item progress {
        width: 100%;
        /* モバイルでは100%に */
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .review-summary {
        min-width: 100%;
    }

    .rating-system1 {
        font-size: 16px;
    }

    .review-breakdown {
        gap: 8px;
    }

    .review-breakdown-item {
        gap: 8px;
    }

    .review-breakdown-item .rating-system1 {
        font-size: 14px;
    }

    .review-breakdown-item progress {
        width: 100%;
        max-width: 250px;
    }
}

/* ▲レビュー表示_レイアウト */

/* ▼レビュー表示_アコーディオントグル機能 */
/* チェックボックスを非表示 */
.review-toggle-checkbox {
    display: none;
}

/* ラベルのスタイル */
.review-toggle-label {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* デフォルトで「開く」を表示、「閉じる」を非表示 */
.review-toggle-open {
    display: inline;
}

.review-toggle-close {
    display: none;
}

/* チェックされた時に「開く」を非表示、「閉じる」を表示 */
.review-toggle-checkbox:checked~.review-toggle-label .review-toggle-open {
    display: none;
}

.review-toggle-checkbox:checked~.review-toggle-label .review-toggle-close {
    display: inline;
}

/* コンテンツを非表示 */
.review-toggle-content {
    display: none;
    overflow: hidden;
}

/* チェックされた時にコンテンツを表示 */
.review-toggle-checkbox:checked~.review-toggle-content {
    display: block;
}

/* ▲レビュー表示_アコーディオントグル機能 */