@charset "UTF-8";
/* =============================================================
   U-KOMI ウィジェット 見た目調整（現デザインへの寄せ込み）
   -------------------------------------------------------------
   U-KOMI標準ウィジェット(review-container / review-summary-container)が
   生成するマークアップを、CHECKBOX TOUR の既存レビューデザイン
   (.cbtReview_card / .cbtRating) に近づけるための上書きCSS。

   ■適用方法:
     ウィジェットを内包する親要素に .cbtUkomi クラスを付け、
     このファイルを checkboxtour.css の後に読み込む。
     （widget.js は自前CSSをページ読込後に <link> 追加するため、
       読込順では勝てない。必ずセレクタ詳細度で上書きする。）

   ■2026-08-24 実レビュー(箱根1件)投稿後、実DOMに合わせて全面調整済。
     実DOM構造:
       .reviewWidget > .reviewWidget_inner
         .reviewWidget_title_container … 「レビュー」見出し(非表示)
         .ratingOverview               … ウィジェット内の要約(非表示。見出し側の別summaryを使用)
         .uKomiWidgetSection           … Write Review / Ask Question ボタン(非表示※要判断)
         .uKomiWidgetFormWrapper…       … 投稿フォーム類(非表示)
         .reviewQuestionTab            … Reviews | Q&A タブ(非表示)
         .u-komi-review-section
           .reviewSortingSection       … 並び替え(非表示)
           .customQuestionSortingWrap  … フィルター(Age/Country/Group等)(非表示※要判断)
           .loadedReviews              … ★レビュー一覧コンテナ → カードグリッド化
             .singleReview             … ★1件のカード
               .singleReview_header > .singleReview_header_right(.starRating + .singleReview_name) + .singleReview_header_date
               .singleReview_CustomQue … Nickname/Age/Country/Group のQ&A(非表示※要判断)
               .singleReview_body.singleReview_body__column
                 .singleReview_body_left … タイトル + 本文
                 .singleReview_body_right … 商品画像(非表示)
               .singleReview_footer     … helpful(thumbsup)(非表示)
   ============================================================= */

/* ---- U-KOMI標準の余計なクロムを抑制 ---- */
.cbtUkomi .reviewWidget,
.cbtUkomi .reviewWidget_inner {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}
.cbtUkomi .reviewWidget_title_container,
.cbtUkomi .uKomiTitleSeparator,
.cbtUkomi .ratingOverview,
.cbtUkomi .uKomiWidgetSection,
.cbtUkomi .uKomiWidgetFormWrapper,
.cbtUkomi .reviewQuestionTab,
.cbtUkomi .reviewSortingSection,
.cbtUkomi .customQuestionSortingWrap,
/* ※.reviewWebsiteRedirect(Powered by U-KOMIロゴ)は契約プラン上表示必須のため
   非表示リストから除外(2026-08-28 クライアント指定)。下に配置スタイルあり */
.cbtUkomi .singleReview_footer,
.cbtUkomi .singleReview_body_right,
.cbtUkomi .singleReviewProductImageWrap,
/* dedicated-widget(トップ・全ツアー)特有のチロム */
.cbtUkomi .reviewTypeSection,
.cbtUkomi .reviewTypeOption,
.cbtUkomi .ukomi-sns-share-section,
.cbtUkomi .dedicated-widget-site,
.cbtUkomi .reviewProductName {
	display: none !important;
}
/* Powered by U-KOMIロゴ: レビュー一覧の下・右寄せで表示(契約プラン上表示必須) */
.cbtUkomi .reviewWebsiteRedirect {
	float: none;
	margin: 16px 0 0;
	text-align: right;
}

/* 親要素のgrid/flex(.cbtReview_grid=トップWhy / .cbpReviewCards=商品ページWhy)だと
   ウィジェットが1カラム幅に潰れるため解除して全幅に */
.cbtUkomi.cbtReview_grid,
.cbtUkomi.cbpReviewCards {
	display: block;
}

/* ---- レビュー一覧を 3カラムのカード並びに（flexで中央寄せ） ----
   grid固定だとレビューが少ない時に左端へ寄って縦長になるため、
   flex + justify-content:center にして件数が少なくても中央に収める。 */
.cbtUkomi .loadedReviews {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 30px 28px;
	float: none;
}

/* ---- 1件のレビューをカード化（.cbtReview_card 相当） ---- */
.cbtUkomi .singleReview {
	box-sizing: border-box;
	float: none;
	/* 3カラム相当（gap 28px×2 を差し引いた1/3幅） */
	flex: 0 1 calc((100% - 56px) / 3);
	min-width: 280px;
	margin: 0;
	padding: 25px 30px 22px;
	background: #fff;
	border: 1px solid var(--cbt-gray-line, #909090);
	border-radius: 20px;
	box-shadow: none;
}
/* U-KOMI標準の .singleReview:last-child{border:none} を打ち消し、
   最後(=一番右)のカードにも枠線を維持する（詳細度で上回る） */
.cbtUkomi .singleReview:last-child {
	border: 1px solid var(--cbt-gray-line, #909090);
	border-radius: 20px;
	padding: 25px 30px 22px;
	margin: 0;
}
/* 注目レビューの黄色背景を無効化 */
.cbtUkomi .singleReview.singleReview--featured {
	background: #fff;
}

/* ---- ヘッダー（星→名前→日付の縦積み） ---- */
.cbtUkomi .singleReview_header {
	display: block;
	margin: 0 0 12px;
}
.cbtUkomi .singleReview_header_right {
	display: block;
	float: none;
}
/* 星（赤・.cbtRating 相当）。U-KOMIの float:left を解除して縦積みに */
.cbtUkomi .singleReview .starRating {
	display: block;
	float: none;
	margin: 0 0 8px;
	color: var(--cbt-red, #E9473F);
	font-size: 20px;
	line-height: 1;
	letter-spacing: -1px;
}
.cbtUkomi .singleReview .starRating .reviewNumber {
	display: none;
}
.cbtUkomi .singleReview_name {
	display: block;
	float: none;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	font-weight: 700;
	color: #000;
}
/* 名前(1行目)→日付(2行目)。float解除済のため素直に下へ積まれる */
.cbtUkomi .singleReview_header_date {
	display: block;
	clear: both;
	float: none;
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #666;
}
/* Verified Buyer タグは控えめに、ツールチップは抑制 */
.cbtUkomi .singleReview_verified_buyer_tag {
	font-size: 11px;
	font-weight: 400;
	color: #1a8a3a;
}
.cbtUkomi .singleReview_tooltip_text {
	display: none;
}

/* 星グリフ（塗り=赤／空=グレー）。summary側にも効く */
.cbtUkomi .ukmcustomfont-ukm-full-star,
.cbtUkomi .ukmcustomfont-ukm-full-star.highlight {
	color: var(--cbt-red, #E9473F);
}
.cbtUkomi .ukmcustomfont-ukm-blank-star {
	color: #e3e3e3;
}

/* ---- カスタムQ&A（Nickname/Age/Country/Group）は一旦非表示 ----
   ※現デザインは「Name / Country」表記。Countryを出すか等は要判断。 */
.cbtUkomi .singleReview_CustomQue {
	display: none;
}

/* ---- 本文（タイトル＋テキストをプレーンに・全幅） ----
   U-KOMIの `.singleReview_body.singleReview_body__column .singleReview_body_left`
   は商品画像(150px)分だけ幅を狭める指定(width:calc(100% - 165px))なので、
   同等以上の詳細度(.cbtUkomi を前置=クラス数で上回る)で全幅に戻す。
   `__column` の flex:row-reverse も block に戻す。 */
.cbtUkomi .singleReview_body,
.cbtUkomi .singleReview_body.singleReview_body__column {
	display: block;
	width: 100%;
}
.cbtUkomi .singleReview_body.singleReview_body__column .singleReview_body_left,
.cbtUkomi .singleReview_body_left {
	float: none;
	width: 100%;
	margin: 0;
}
.cbtUkomi .singleReview_title {
	display: block;
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 700;
	color: #000;
}
.cbtUkomi .singleReview_body_left p {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: #000;
}

/* ---- スターレーティング要約（review-summary-container / data-action=summary） ---- */
.cbtUkomi .review-summary-container .starRating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--cbt-red, #E9473F);
	font-size: 20px;
	line-height: 1;
}
.cbtUkomi .review-summary-container .reviewNumber {
	font-size: 16px;
	line-height: 1.4;
	color: #000;
	letter-spacing: 0;
}

/* ---- レスポンシブ（SP: 1カラム） ---- */
@media (max-width: 767px) {
	.cbtUkomi .loadedReviews {
		gap: 16px;
	}
	.cbtUkomi .singleReview {
		flex-basis: 100%;
		min-width: 0;
		padding: 20px 20px 18px;
		border-radius: 16px;
	}
}

/* =============================================================
   Customer Reviews 用バリアント（.cbtUkomi-rows）
   -------------------------------------------------------------
   .cbtUkomi と併用する。カードグリッド(Why用)を打ち消し、現デザインの
   行リスト(.cbpReview: アバター左＋名前/星/本文)に寄せる。
   ※U-KOMIのレビューには投稿者写真が無いため、アバターは汎用アイコンを
     CSSで生成(::before)。星は現デザインに合わせ黒。
   ============================================================= */
.cbtUkomi-rows .loadedReviews {
	display: block;
}
.cbtUkomi-rows .singleReview {
	flex: none;
	width: auto;
	min-width: 0;
	background: none;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid var(--cbt-gray-line, #909090);
	padding: 0 0 22px;
	margin: 0 0 30px;
}
/* 行リストの最後の行はカード枠にせず行スタイルを維持
   （card用の .cbtUkomi .singleReview:last-child を打ち消す。rowsが後勝ち） */
.cbtUkomi-rows .singleReview:last-child {
	border: none;
	border-radius: 0;
	padding: 0 0 22px;
	margin: 0;
}
/* ヘッダー: 星/名前/日付を左寄せで縦積み
   ※U-KOMIに投稿者写真が無いためアバターは表示しない(先方判断でトルツメ) */
.cbtUkomi-rows .singleReview_header {
	display: block;
	margin: 0 0 12px;
}
.cbtUkomi-rows .singleReview_header::before {
	display: none;
}
/* 星: 現デザイン(.cbpReview_stars)に合わせ黒・20px（Why用の赤・block を上書き）。
   ※赤に戻す場合はこの2ブロックの色を var(--cbt-red) にするだけ */
.cbtUkomi-rows .singleReview .starRating {
	color: #000;
	margin: 0 0 4px;
}
.cbtUkomi-rows .ukmcustomfont-ukm-full-star,
.cbtUkomi-rows .ukmcustomfont-ukm-full-star.highlight {
	color: #000;
}
.cbtUkomi-rows .singleReview_name {
	font-family: var(--font-rubik);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.4;
	color: #000;
}
.cbtUkomi-rows .singleReview_header_date {
	margin: 2px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: #000;
}
/* 本文はフル幅(アバター下も使う)。タイトルは控えめに残す */
.cbtUkomi-rows .singleReview_title {
	font-size: 16px;
	margin: 0 0 4px;
}
.cbtUkomi-rows .singleReview_body_left p {
	font-size: 16px;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.cbtUkomi-rows .singleReview_name {
		font-size: 17px;
	}
}