@charset "UTF-8";
/* =========================================================================
   U-KOMI レビューウィジェット 調整用CSS
   方針：元のデザインを活かして、必要な箇所だけ軽く上書き
   ※ api.u-komi.com の各CSSより後に読み込むこと

   ★全セレクタを [data-action="widget"]（= .review-container / JSウィジェットの
     最外要素）配下にスコープし、ページの他要素に影響しないよう封じ込めている。
   ========================================================================= */

/* 英数字フォント（Plus Jakarta Sans）読み込み
   ※@font-face はグローバルだが、font-family を参照する箇所でしか効かないため影響なし */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

/* 英数字に Plus Jakarta Sans を適用
   ※英数字専用フォントなので、日本語は後続の sans-serif にフォールバックされる */
[data-action="widget"] .reviewNumber {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
}

/* =========================================================================
   見出し  CUSTOMER REVIEW / お客様レビュー
   元テキスト「レビュー」を隠して差し替え
   ========================================================================= */
[data-action="widget"] .reviewWidget_title {
  font-size: 0 !important;            /* 元の「レビュー」を隠す */
  line-height: 1.5;
  margin: 0;
}
[data-action="widget"] .reviewWidget_title::before {
  content: "CUSTOMER REVIEW";
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  color: #232323;
}
[data-action="widget"] .reviewWidget_title::after {
  content: "お客様レビュー";
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #232323;
}
/* 元の区切り線は非表示 */
[data-action="widget"] .uKomiTitleSeparator { display: none !important; }

/* =========================================================================
   サマリー（評価）と項目別評価バーを縦並び・左寄せに
   ========================================================================= */
[data-action="widget"] .ratingOverview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
[data-action="widget"] .review-widget-summary-container,
[data-action="widget"] .summaryCustomRating {
  width: 100%;
  text-align: left;
}
[data-action="widget"] .review-widget-summary-container {
  margin-top: 20px;
  margin-bottom: 0;
}

.ratingOverview .starRating .ukmcustomfont{
  font-size: 15px;
}


[data-action="widget"] .review-widget-summary-container .starRating .reviewNumber strong {
  font-size: 16px;
  color: #232323;
  letter-spacing: 0;
}
/* ★と数値・件数を上下中央に揃える */
[data-action="widget"] .review-widget-summary-container .starRating {
  display: flex;
  align-items: center;
}

/* ウィジェット本体の左右paddingを0に */
[data-action="widget"] .reviewWidget .reviewWidget_inner.swiper,
[data-action="widget"] .reviewWidget_inner,
[data-action="widget"] .u_komi_qa_widget_inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* customRatingAns：中央寄せ・横並びをやめて、縦並び・左寄せに */
[data-action="widget"] .summaryCustomRating .customRatingAns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
[data-action="widget"] .summaryCustomRating .customRatingAns .singleQueAns {
  margin: 0 0 10px;          /* 中央寄せ用の大きな余白を解除 */
  text-align: left;
  width: 100%;
  /* 項目ごとに1行：ラベルとバーを横並び */
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ラベル・バーを同じ行に（元の display:block を解除） */
[data-action="widget"] .summaryCustomRating .custQue {
  display: inline-block !important;
  margin-bottom: 0 !important;
  white-space: nowrap;
  color: #232323 !important;
}
[data-action="widget"] .summaryCustomRating .custRating {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}

/* 「質問する」ボタン・レビュー/Q&Aタブを非表示 */
[data-action="widget"] .uKomiWidget-btn.uKomiWidgetAskQuestionBtn-btn {
  display: none;
}
[data-action="widget"] .reviewQuestionTab {
  display: none;
}

/* レビュー1件の上下余白 */
[data-action="widget"] .singleReview {
  padding: 0 0 8px;
}
[data-action="widget"] .customQuestionSorting {
  padding: 0;
}

/* 投稿フォームのユーザー欄（お名前・メール・ニックネーム） */
[data-action="widget"] .uKomiWidgetUserFieldGroup {
  width: 100%;
  margin-left: 0;
}

/* =========================================================================
   レビュー投稿フォームの入力欄を均等に
   （元の 30% 3カラム inline-block をやめて、全幅・縦並び・余白統一）
   ========================================================================= */
[data-action="widget"] .uKomiWidgetWriteReviewFormWrapper .uKomiWidgetFormFieldGroup,
[data-action="widget"] .uKomiWidgetWriteReviewFormWrapper .uKomiWidgetUserFieldGroup {
  display: block !important;
  width: 100% !important;
  margin: 0 0 15px !important;
  vertical-align: top;
  box-sizing: border-box;
}
/* テキスト入力欄：高さ・余白を統一 */
[data-action="widget"] .uKomiWidgetWriteReviewFormWrapper .uKomiWidgetFormFieldInput input,
[data-action="widget"] .uKomiWidgetWriteReviewFormWrapper .uKomiWidgetUserFieldInput input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
}
/* テキストエリアも全幅で揃える */
[data-action="widget"] .uKomiWidgetWriteReviewFormWrapper .uKomiWidgetFormFieldTextArea textarea {
  width: 100%;
  box-sizing: border-box;
}
/* ラベルも各欄で揃うように */
[data-action="widget"] .uKomiWidgetWriteReviewFormWrapper .uKomiWidgetFormFieldLabel {
  margin-bottom: 5px;
  font-weight: bold;
      color: #232323;
}
/* 空のエラー欄・文字数カウンター欄が余白を作るのを解消
   （本文の下／メール下＝ニックネームの上 の隙間対策）*/
[data-action="widget"] .uKomiWidgetWriteReviewFormWrapper .ukomi-review-submit-error-area:empty {
  display: none !important;
}
[data-action="widget"] .uKomiWidgetWriteReviewFormWrapper .ukomi-textarea-limit-text-span:empty {
  height: 0 !important;
}

/* レビュー日付の位置を少し下げて高さを揃える */
[data-action="widget"] .singleReview_header_date {
  position: relative;
  top: 1px;
  font-size: 12px;
  color: #232323;
}

/* レビュー内の評価バー各行（サイズ感／品質／お買い得感／使いやすさ）の
   余白を均等に。customRatingAns と Wrap の子 div に同じマージンを付与 */
[data-action="widget"] .singleReview_CustomQue .customRatingAns > .singleQueAns,
[data-action="widget"] .singleReview_CustomQue .customRatingAns.uKomiSelectionTypeCustQueAnswerWrap > .singleQueAns {
  margin: 0 0 6px !important;
}

/* サイズ感（選択タイプ）ブロックの上余白 */
[data-action="widget"] .customRatingAns.uKomiSelectionTypeCustQueAnswerWrap {
  margin-top: 17px;
}

/* 星サイズ */
[data-action="widget"] .starRating span {
  font-size: 11px;
}

/* サマリーの件数（最後の span）の上余白を消す */
[data-action="widget"] .review-widget-summary-container .starRating span:last-child {
  margin-top: 0;
}


.uKomiWidgetSection{
  margin-top: 30px;
  margin-bottom: -7px;
}

.u-komi-section .reviewSortingSection, .u-komi-section .customQuestionSorting{
display: none !important;
}

.review-container .review-widget-content-summary .review-widget-content-summary-title img{
  display: none;
}

.review-container .review-widget-content-summary .review-widget-content-summary-title{
  color: #232323;
}

.rating-bar.filled{
    background: #39659B;
    border: 1px solid #39659B;
}

.review-container .review-widget-content-summary .review-widget-content-summary-title{
  font-size: 14px;
}

.review-summary--check img {
  filter: brightness(0) saturate(100%) invert(43%) sepia(74%) saturate(273%)
          hue-rotate(90deg) brightness(94%) contrast(80%);
}

.review-widget-content-summary-topic span img{

      width: 14px !important;
      height: 14px !important;
}

.review-container .review-widget-content-summary-inner{
  border: #c3c3c3 solid 1px;
  border-radius: 10px;
  padding: 25px 20px;
}

.review-widget-content-summary-topic span{
  margin-bottom: 0;
}

.review-container .review-widget-content-summary .review-widget-content-summary-topic{
  margin-top: 7px;
}

.uKomiWidgetSectionBtn .uKomiWidget-btn{
  background: #F5F5F5;
  border-radius: 500px;
      color: #232323 !important;
      font-size: 10px;
      padding: 10.5px 16px;
}

.uKomiWidgetSectionBtn .ukmcustomfont{
  color: #232323 !important;
}

.uKomiWidgetSectionBtn .uKomiWidget-btn {
  transition: opacity 0.3s ease;
}

.uKomiWidgetSectionBtn .uKomiWidget-btn:hover {
  background: #F5F5F5 !important;
  color: #232323 !important;
  text-decoration: none !important;
  opacity: 0.7;
}

/* アイコン(i)も白に変わる指定があるので戻す */
.uKomiWidgetSectionBtn .uKomiWidget-btn:hover i {
color: #232323 !important;
}

.uKomiWidgetSectionBtn .uKomiWidget-btn.activeBtn{

  background: #F5F5F5 !important;
}

.summaryCustomRating .custRating span:first-child, .summaryCustomRating .custRating span:last-child{
  border-radius: 0;
}

.custRating span:last-child{
  border-radius: 0;
}

.custRating span:first-child{
  border-radius: 0;
}

.summaryCustomRating .custQue{
  font-size: 14px;
  font-weight: bold;
}

span.custRating.uKomiSelectionTypeCustQueAnswer{
      font-size: 10px;
}

.summaryCustomRating{
  margin-bottom: 7px;
}

.uKomiWidgetSubmitBtnWrapper{
  padding-bottom: 0;
}

.singleQueAns.single_choice_ans{
  font-size: 14px;
}
.singleReview_CustomQue .custQue{
  font-size: 14px;
}

.singleReview_title{
  display: none;
}
.singleReview_body p{
  font-size: 14px;
  color: #232323;
  padding: 15px 0;
}

.reviewProductName{
  color: #232323;
  font-weight: normal;
}

.thumbsup.mini_thumbs button.down, .thumbsup.mini_thumbs button.up{
  border: solid 1px #c6c6c6;
  border-radius: 5px;
  background-color: #fff;
  color: #737373;
}



.thumbsup.mini_thumbs button.up .like-bg:before{
  -webkit-text-fill-color: transparent; /* 中の塗りを消す */
  -webkit-text-stroke: 1px currentColor; /* 輪郭だけ描画 */
}


.summaryCustomRating{

  margin-top: 3px;
}

.review-container .review-widget-content-summary-inner{
  margin-bottom: -14px;
}

.loadedProducts, .loadedReviews{
    margin-top: -30px;

}

.singleReview_name{

      margin-left: 5px;
      margin-top: 0;
}

.singleReview_CustomQue .singleQueAns:first-child{
    margin-top: 17px;

}

.starRating span.highlight{
    color: #FF9100;
}




.ReviewWidget_pagination span, .ReviewWidget_question_pagination span, .productWidget_pagination span{
border-radius: 100%;
    height: 40px;
    width: 40px;
    align-items: center;
    border: 0;
        justify-content: center;
background-color: #f5f5f5;
}

.ReviewWidget_pagination span.active, .ReviewWidget_question_pagination span.active, .productWidget_pagination span.active{
background-color: #fff;
border: 1px solid #fff;
    color: #232323;
}

span.reviewProductName span{
  display: none;
}



.starRating span:first-child {
  padding-left: 0;
}




.review-summary-container .starRating .reviewNumber, .review-widget-summary-container .starRating .reviewNumber{
  padding-left: 0;
}


.uKomiWidgetWriteVerifiedReviewForm{
  background-color:#FDF5E8;
  padding: 20px 15px;
  margin-top: 5px;
}

.uKomiWidgetWriteVerifiedReviewForm p{
  font-size: 14px;
  color: #232323;
  letter-spacing: 1.4px;
}

.uKomiWidgetSubmitBtnWrapper button, .uKomiWidgetWriteVerifiedReviewSubmitBtn{

      width: 100%;
          background: #ff9100;
              border-radius: 500px;
              font-size: 12px;
              padding: 12px 15px;
}
.uKomiWidgetWriteVerifiedReviewSubmitBtn{
  margin-top: 25px;
}
.uKomiWidgetUserFieldInput input[name=ukomi_verify_email]{
  border: 0;
}

.loadedReviews > .singleReview:first-child {
  border-top: 1px solid #ddd;
      padding-top: 20px;
          margin-top: 0;
}
.required {
  font-size: 0;
}

.errorCheckIcon .ukomi-error-icon, .optionalCheckIcon .ukomi-optional-icon{
     background: inherit;
     padding: 0;
}
.errorCheckIcon, .optionalCheckIcon{
  margin-left: 0;
}
.uKomiWidgetFormFieldLabel[data-formlabel-name="email"] .ukomi-error-icon {
  font-size: 0;
}

.uKomiWidgetFormFieldLabel[data-formlabel-name="email"] .ukomi-error-icon::after {
  content: "*";
  font-size: 14px;
  color: #F00;
}


/* AI要約ボックス側の上余白はリセット */
.reviewWidget .review-widget-content-summary,
.reviewWidget .review-widget-content-summary-inner {
  margin-top: 0 !important;
}

/* 通常：サイズ・品質などがない時 */
.reviewWidget .ratingOverview {
  margin-bottom: 12px !important;
}

/* サイズ・品質などの評価パーツがある時 */
.reviewWidget .ratingOverview:has(.summaryCustomRating .singleQueAns) {
  margin-bottom: -4px !important;
}

@media only screen and (max-width: 768px) {
.singleReview_name{

  margin-left: 0;
  margin-top: 7px;
}
.uKomiWidgetSection{
  margin-top: 38px;
  margin-bottom: -17px;
}
.loadedProducts, .loadedReviews{
  margin-top: -10px;
}

.uKomiWidgetWriteVerifiedReviewForm{
  margin-top: 30px;
}

}