@charset "UTF-8";
/*
 * WP Customer Reviews カスタムスタイリング
 * Figma: 8166:6245
 * - voice-posts ページ（投稿フォーム）
 * - 商品詳細ページ REVIEW セクション（レビュー一覧）
 *
 * ユーザー指示 2026-05-29。
 */

/* =========================================================
   voice-posts ページ全体（商品詳細と同じレイアウト）
   ========================================================= */
.page-voice-post {
  width: 1260px;
  max-width: 100%;
  margin: 0 auto;
}

.page-voice-post .voice-post-section {
  padding: 0px 0px 120px;
  width: 554px;
  margin: auto;
}

/* voice-posts のパンくず: 背景は full-bleed のまま、中身 list だけ 1260px center
   リンク群（TOP > PRODUCT > ...）の文字位置は商品詳細と同じ左寄せ。
   ユーザー指示 2026-05-29。 */
@media (min-width: 798px) {
  .page-voice-post .shohin-breadcrumb {
    display: flex;
    justify-content: center;
  }
  .page-voice-post .shohin-breadcrumb__list {
    width: 1260px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
}

.page-voice-post .section-eyebrow {
  margin-bottom: 40px;
}

/* SP: パンくず非表示、フォームを画面幅にレスポンシブ
   ユーザー指示 2026-05-29。 */
@media (max-width: 797px) {
  .page-voice-post .shohin-breadcrumb {
    display: none;
  }
  .page-voice-post .voice-post-section {
    width: 100%;
    padding: 0 5% 80px;
    box-sizing: border-box;
  }
  /* WPCR の table を画面幅に強制（横はみ出し防止） */
  .page-voice-post .wpcr3_respond_1,
  .page-voice-post .wpcr3_respond_2,
  .page-voice-post .wpcr3_respond_3,
  .page-voice-post .wpcr3_div_2,
  .page-voice-post .wpcr3_table_2,
  .page-voice-post .wpcr3_table_2 tr,
  .page-voice-post .wpcr3_table_2 td {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* 入力欄・テキストエリアも親幅に収める */
  .page-voice-post .wpcr3_respond_1 input[type="text"],
  .page-voice-post .wpcr3_respond_1 input[type="email"],
  .page-voice-post .wpcr3_respond_1 textarea,
  .page-voice-post .text-input.wpcr3_required,
  .page-voice-post textarea.wpcr3_required {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* textarea の cols 属性が効かないよう明示的に強制 */
  .page-voice-post textarea.wpcr3_ftext,
  .page-voice-post #id_wpcr3_ftext {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block;
  }
  /* 親 td も block の幅で確実に収める（table-layout の影響を打ち消す） */
  .page-voice-post .wpcr3_review_form_review_field_textarea,
  .page-voice-post .wpcr3_review_form_review_field_textarea td {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* =========================================================
   レビュー投稿フォーム（voice-posts ページ）
   ========================================================= */
.wpcr3_respond_1,
.wpcr3_respond_2,
.wpcr3_respond_3,
.wpcr3_div_2,
#wpcr3-respond-form {
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--font-jp-base);
  font-size: 16px;
  color: var(--color-text);
}

.wpcr3_respond_1 p,
.wpcr3_respond_2 p,
.wpcr3_respond_3 p,
.wpcr3_div_2 p {
  margin: 16px 0;
}

/* テーブルレイアウトを横並びから縦並びに変更（添付画像準拠）。
   WPCR は table で組まれているので、TR/TD を block にして縦並びに。 */
.wpcr3_table_2,
.wpcr3_table_2 tbody,
.wpcr3_table_2 tr,
.wpcr3_table_2 td {
  display: block;
  width: 100%;
  padding: 0;
}
.wpcr3_table_2 tr {
  margin-bottom: 28px;
}

/* 各ラベル（お名前 / メールアドレス / 評価 / レビュー） */
.wpcr3_respond_1 label,
.wpcr3_respond_2 label,
.wpcr3_respond_3 label,
.wpcr3_div_2 label,
#wpcr3-respond-form label {
  display: block;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;          /* 添付画像準拠で太字 */
  color: var(--color-text);
  letter-spacing: 0.04em;
}

/* 「Submit your review」のタイトル文は不要なので非表示 */
.wpcr3_leave_text {
  display: none;
}

/* テキスト入力欄 */
.wpcr3_respond_1 input[type="text"],
.wpcr3_respond_1 input[type="email"],
.wpcr3_respond_1 input[type="url"],
.wpcr3_respond_2 input[type="text"],
.wpcr3_respond_2 input[type="email"],
.wpcr3_respond_3 input[type="text"],
.wpcr3_respond_3 input[type="email"],
.wpcr3_div_2 input[type="text"],
.wpcr3_div_2 input[type="email"],
.text-input.wpcr3_required {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-gray-base, #f2f2f2);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-jp-base);
  font-size: 15px;
  color: var(--color-text);
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wpcr3_respond_1 input[type="text"]:focus,
.wpcr3_respond_1 input[type="email"]:focus,
.wpcr3_respond_2 input[type="text"]:focus,
.wpcr3_respond_3 input[type="text"]:focus,
.wpcr3_div_2 input[type="text"]:focus,
.text-input.wpcr3_required:focus {
  outline: none;
  border-color: var(--color-accent);
  background: #fff;
}

/* テキストエリア（レビュー本文） */
.wpcr3_respond_1 textarea,
.wpcr3_respond_2 textarea,
.wpcr3_respond_3 textarea,
.wpcr3_div_2 textarea,
textarea.wpcr3_required {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  background: var(--color-gray-base, #f2f2f2);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-jp-base);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  resize: vertical;
  box-sizing: border-box;
}
textarea.wpcr3_required:focus {
  outline: none;
  border-color: var(--color-accent);
  background: #fff;
}

/* 星評価（フォーム内） */
.wpcr3_rating_stars,
.wpcr3_required.wpcr3_frating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 28px;
  line-height: 1;
  color: #f5b301;
}

.wpcr3_rating_stars a,
.wpcr3_rating_stars span,
.wpcr3_rating_style1 a {
  color: #f5b301 !important;
  text-decoration: none;
}

/* 送信ボタン: SVG 画像化＋右寄せ（ユーザー指示 2026-05-29） */
.wpcr3_button_1.wpcr3_submit_btn,
input[type="submit"].wpcr3_button_1 {
  display: block;
  width: 201px;
  height: 62px;
  background: url('../img/wpcr/submit.svg') center/contain no-repeat;
  border: none;
  font-size: 0;                 /* テキスト「送信」を隠し画像のみ表示 */
  color: transparent;
  cursor: pointer;
  margin: 24px 0 0 auto;        /* 右寄せ */
  padding: 0;
  transition: opacity 0.15s ease;
}
.wpcr3_button_1.wpcr3_submit_btn:hover,
input[type="submit"].wpcr3_button_1:hover {
  opacity: 0.8;
}

/* 送信ボタンを含むセル全体を右寄せに（td colspan="2" の中で配置） */
.wpcr3_table_2 td:has(.wpcr3_submit_btn) {
  text-align: right;
}

/* キャンセルボタン非表示（最初からフォーム出してるので不要） */
.wpcr3_button_1.wpcr3_cancel_btn {
  display: none !important;
}

/* スパム防止フィールド（標準で非表示） */
.wpcr3_fakehide {
  display: none !important;
}

/* Website / Review Title 行を非表示（ユーザー指示 2026-05-29） */
.wpcr3_review_form_text_field:has(#wpcr3_fwebsite),
.wpcr3_review_form_text_field:has(#wpcr3_ftitle) {
  display: none !important;
}

/* =========================================================
   レビュー一覧カード（商品詳細 + voice-posts）
   ========================================================= */
.wpcr3_review {
  background: var(--color-gray-base, #f2f2f2);
  padding: 40px 60px;
  margin: 0 0 24px;
  border-radius: 0;
  font-family: var(--font-jp-base);
}

/* レビュアー名見出し */
.wpcr3_reviewerheading,
.wpcr3_review .reviewer {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
}

/* 星評価（一覧内）— オレンジに */
.wpcr3_review .wpcr3_rating_style1,
.wpcr3_review .wpcr3_rating_style1 * {
  color: #f5b301 !important;
}

/* 本文 */
.wpcr3_review_body,
.wpcr3_review .description {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 12px 0 0;
}

/* レビュー本文・管理者返信 共通タイポグラフィ */
.wpcr3_response,
.wpcr3_review .wpcr3_admin_response,
.wpcr3_review blockquote {
  padding: 4px 0;
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub, #767676);
  font-style: normal;
}
/* 赤い縦線は「こちらからの返信（admin response）」だけに付ける。
   レビュー本文には付けない（ユーザー指示 2026-05-30）。 */
.wpcr3_response,
.wpcr3_review .wpcr3_admin_response {
  border-left: 2px solid var(--color-accent);
  padding-left: 16px;
}
/* 返信の色・マージン調整（ユーザー指示 2026-05-30）。
   プラグイン既定（青字・マージン）を上書きするため高 specificity で指定。 */
div.wpcr3_review blockquote.wpcr3_content.wpcr3_admin_response {
  margin-left: 0px;
  color: #828181;
  margin-top: 0px;
}

/* ページネーション */
.wpcr3_pagination,
.wpcr3_pagi_links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--color-text-sub, #767676);
}
.wpcr3_pagination a,
.wpcr3_pagi_links a {
  color: var(--color-text-sub, #767676);
  text-decoration: none;
  padding: 4px 8px;
}
.wpcr3_pagination a:hover,
.wpcr3_pagi_links a:hover {
  color: var(--color-accent);
}
.wpcr3_pagination .current,
.wpcr3_pagi_links .current {
  color: var(--color-accent);
  font-weight: 700;
}

/* 平均評価（"Average rating: 0 reviews" のような行）— 不要なら非表示。
   出したい場合はコメントアウト。
   ユーザー指示で必要なら個別対応。 */
.wpcr3_avgRating {
  display: none;
}

/* SP 調整 */
@media (max-width: 797px) {
  .wpcr3_review {
    padding: 24px 16px;
  }
}