.review_body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
background-color: #eeeddc;
color: #333;
margin: 0;
padding: 20px;
border-radius: 20px;
}
.review-container {
max-width: 600px;
margin: 0 auto;
}
.main-title {
text-align: center;
font-size: 24px;
color: #b1a077;
font-style: italic;
letter-spacing: 1px;
margin-bottom: 20px;
position: relative;
}
.main-title::before,
.main-title::after {
content: '';
position: absolute;
top: 50%;
width: 50px;
height: 1px;
background-color: #b1a077;
}
.main-title::before {
left: calc(50% - 130px);
}
.main-title::after {
right: calc(50% - 130px);
}
.sub-title {
text-align: center;
font-size: 27px;
color: #555;
font-weight: bold;
margin-top: -15px; /* Move closer to main-title */
margin-bottom: 40px; /* Move further from review items */
}
.review-card {
background-color: #fff;
border-radius: 20px;
padding: 25px;
/* width: 88%; */
margin: 0 auto 20px auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
position: relative;
}
.review-card .delete-btn,
.review-card .edit-btn {
font-size: 12px;
padding: 5px 10px;
position: absolute;
top: 15px;
}
.review-card .delete-btn {
right: 15px;
}
.review-card .edit-btn {
right: 70px;
}
.review-rating {
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.review-headline {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.stars {
color: #ffd700;
letter-spacing: 2px;
}
.rating-number {
margin-left: 10px;
color: #555;
}
.review-text {
font-size: 15px;
line-height: 1.7;
color: #555;
overflow-wrap: break-word; /* 変更: 長い単語を強制的に改行 */
}
.review-text .highlight {
background-color: #f3f0bc;
font-weight: bold;
display: inline-block; /* 修正: 強調部分をブロック要素として扱い、途中での改行を防ぐ */
}
.separator {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(177, 160, 119, 0.75), rgba(177, 160, 119, 0.75) 5px, transparent 5px, transparent 10px);
background-size: 10px 1px;
background-repeat: repeat-x;
margin: 20px 0;
}