/* ========================================
   伊藤農園 自社サイト 共通スタイル
   futureshopの「追加CSS」欄に貼り付けて使用
   ======================================== */

/* ===== セクション全体 ===== */
.it-reviews {
    background: #fffdf9;
    padding: 40px 0;
}


.it-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.it-section-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
}

.it-section-title span {
    display: block;
    font-size: 14px;
    color: #f07b00;
    margin-top: 4px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ===== スライダー外枠 ===== */
.rv-slider-outer {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* スライドトラック（FSのdivをトラックとする） */
#review_display_wrap {
    overflow: hidden;
    width: 100%;
    padding: 0 20px;
}

/* 内部フレックスコンテナ（ul） */
#review_display_wrap ul {
    display: flex !important;
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* 各カード (li) */
.fs-c-reviewList__item {
    flex: 0 0 calc((100% - 2 * 16px) / 3);
    min-width: 0;
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid #f0ebe3;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    margin: 10px 0;
    box-sizing: border-box;
}

.fs-c-reviewList__item:hover {
    transform: translateY(1px);
}

/* Flex order で並び替え */
.fs-c-reviewList__item__info {
    order: 1;
    margin-bottom: 12px;
}

.fs-c-reviewList__item__product {
    order: 2;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #eee;
}

.fs-c-reviewList__item__body {
    order: 3;
    flex: 1;
}

.fs-c-reviewList__item>span[data-id="fs-analytics"] {
    display: none !important;
}

/* --- 1. レビュアーと星と日付 (.fs-c-reviewInfo) --- */
.fs-c-reviewInfo {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    align-items: center;
}

.fs-c-reviewRating {
    grid-column: 1 / 3;
    grid-row: 1;
}

/* 星の簡易CSS表示 */
.fs-c-reviewStars {
    font-size: 16px;
    color: #ddd;
    position: relative;
    display: inline-block;
    line-height: 1;
}

.fs-c-reviewStars[data-ratingcount^="1"]::after {
    width: 20%;
}

.fs-c-reviewStars[data-ratingcount^="2"]::after {
    width: 40%;
}

.fs-c-reviewStars[data-ratingcount^="3"]::after {
    width: 60%;
}

.fs-c-reviewStars[data-ratingcount^="4"]::after {
    width: 80%;
}

.fs-c-reviewStars[data-ratingcount^="5"]::after {
    width: 100%;
}

.fs-c-reviewInfo__reviewer {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

.fs-c-reviewerStatus {
    background: #529c34;
    color: white;
    font-size: 14px;
    padding: 2px 30px;
    border-radius: 4px;
    font-weight: normal;
    line-height: 30px;
}


.fs-c-reviewer__status {
    font-family: var(--font-family);
}

.fs-c-reviewer__name {
    font-family: var(--font-family);
}


.fs-c-reviewer__name a {
    color: #333;
    text-decoration: none;
}

.fs-c-reviewer__name__reviewNumber {
    display: none;
    /* レビュー件数は非表示に */
}

.fs-c-reviewer__profile {
    display: none;
    /* 都道府県や年代は一旦非表示にしてスッキリさせる */
}

.fs-c-reviewInfo__date {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    font-size: 11px;
    color: #999;
    display: flex;
    gap: 4px;
}

.fs-c-reviewInfo__date dt {
    display: none;
}

/* "投稿日" ラベルは非表示 */
.fs-c-reviewInfo__date dd {
    margin: 0;
}



.fs-c-reviewer__name__nickname::after {
    content: " さん";
    font-family: var(--font-family);
}

/* --- 2. 商品名と画像 (.fs-c-reviewProduct) --- */
.fs-c-reviewProduct {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
}

.fs-c-productImage {
    width: 60%;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
}

.fs-c-productImage img {
    width: 100%;
    height: 100%;
    object-fit: auto;
}

.fs-c-reviewProduct__info .fs-c-productName {
    flex: 1;
}

.fs-c-reviewProduct__info .fs-c-productName a {
    text-decoration: none;
}

.fs-c-reviewProduct__info .fs-c-productName .fs-c-productName__name {
    font-size: 18px;
    color: #f07b00;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-width: 230px;
    font-family: var(--font-family);
}

.fs-c-reviewList__item:first-child {
    display: none;
}

/* --- 3. 本文 (.fs-c-reviewBody) --- */
.fs-c-reviewBody {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    background-color: #fffdf9;
    border: none;
    font-family: var(--font-family);
}

/* ===== 矢印ボタン ===== */
.rv-slider-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #ddd;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    align-self: center;
}

.rv-slider-btn:hover {
    background: #f07b00;
    border-color: #f07b00;
    color: #fff;
}

/* ===== ドットインジケーター ===== */
.rv-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.rv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.rv-dot.is-active {
    background: #f07b00;
    transform: scale(1.3);
}

/* ===== レスポンシブ ===== */
@media (max-width: 992px) {
    .fs-c-reviewList__item {
        flex: 0 0 calc((100% - 16px) / 2);
    }
}

@media (max-width: 640px) {
    .fs-c-reviewList__item {
        flex: 0 0 100%;
    }
}

/* ===== スマホ (500px以下) : CSSスクロール式 ===== */
@media (max-width: 500px) {

    /* 矢印ボタンを少し小さく */
    .rv-slider-btn {
        width: 30px;
        height: 30px;
    }

    /* #review_display_wrap : overflow を JS が visible に変えるので
               ここでは scroll-snap 用の基本スタイルを準備しておく */
    #review_display_wrap ul {
        /* JS側でscrollSnapType等を付加するが、
                   CSSでも -webkit- プレフィックス分をサポートしておく */
        -webkit-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        /* スクロールバーを非表示（Chrome/Safari） */
        scrollbar-width: none;
    }

    #review_display_wrap ul::-webkit-scrollbar {
        display: none;
    }
}

/* ===== 「すべてのレビューを見る」リンク ===== */
.rv-all-link-wrap {
    text-align: center;
    margin-top: 28px;
}

.rv-all-link {
    display: inline-block;
    padding: 10px 32px;
    border: 2px solid #f07b00;
    border-radius: 999px;
    color: #f07b00;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.05em;
    transition: background 0.2s, color 0.2s;
}

.rv-all-link:hover {
    background: #f07b00;
    color: #fff;
}