/* =========================================================
   会員レビュー一覧
   ========================================================= */


/* ---------------------------------------------------------
   ページ全体
   --------------------------------------------------------- */

.member_review_page_wrap {
	width: 100% !important;
	background: #f5f6f7 !important;
	padding: 150px 20px 80px !important;
	box-sizing: border-box !important;
}

.member_review_container {
	width: 100% !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.member_review_main {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.member_review_content {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   レビュー全体
   ========================================================= */

#review {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

#review > form {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   ページタイトル
   --------------------------------------------------------- */

#review > form > h2 {
	margin: 0 0 10px !important;
	padding: 0 !important;

	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;

	color: #222 !important;

	border: none !important;
	background: none !important;
}

#review .pageguide {
	margin: 0 0 8px !important;
	padding: 0 !important;

	font-size: 14px !important;
	line-height: 1.6 !important;

	color: #666 !important;
}

#review > form > p:not(.pageguide) {
	margin: 0 0 30px !important;
	padding: 0 !important;

	font-size: 13px !important;
	line-height: 1.6 !important;

	color: #777 !important;
}


/* =========================================================
   レビューカード
   ========================================================= */

#review .box {
	position: relative !important;

	display: grid !important;
	grid-template-columns: 235px minmax(0, 1fr) !important;
	grid-template-rows: auto !important;
	align-items: stretch !important;

	column-gap: 28px !important;

	width: 100% !important;
	min-height: auto !important;
	height: auto !important;
	max-height: none !important;

	margin: 30px 0 0 !important;
	padding: 25px !important;

	box-sizing: border-box !important;

	overflow: visible !important;

	background: #fff !important;

	border: 1px solid #e1e1e1 !important;
	border-radius: 12px !important;

	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;

	color: #222 !important;
}


/* 擬似要素をリセット（縦線は :before を使用） */

#review .box:after {
	content: none !important;
	display: none !important;
}


/* =========================================================
   左右カラム（縦線：ボックス縦幅いっぱい）
   ========================================================= */

#review .box:before {
	content: "" !important;
	display: block !important;

	position: absolute !important;
	top: 25px !important;
	bottom: 25px !important;
	left: calc(25px + 235px) !important;

	width: 1px !important;

	background: #e1e1e1 !important;

	pointer-events: none !important;
	z-index: 1 !important;
}

#review .review_side {
	height: auto !important;
	min-height: 0 !important;
	align-self: stretch !important;
}

#review .review_body {
	min-width: 0 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: column !important;
}


/* =========================================================
   商品画像
   ========================================================= */

#review .review_item_image {
	width: 180px !important;
	height: 180px !important;

	margin: 0 auto 15px !important;
	padding: 0 !important;

	display: flex !important;
	justify-content: center !important;
	align-items: center !important;

	box-sizing: border-box !important;

	background: transparent !important;
}

#review .review_item_image a {
	width: 100% !important;
	height: 100% !important;

	display: flex !important;
	justify-content: center !important;
	align-items: center !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
}

#review .review_product_image {
	display: block !important;

	width: auto !important;
	height: 155px !important;

	max-width: 130px !important;
	max-height: 155px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: none !important;

	object-fit: contain !important;
}


/* =========================================================
   星
   ========================================================= */


#review .box > div[m\:id="IF_STAR"] {
	grid-column: 1 !important;
	grid-row: 1 !important;

	margin: 0 !important;
	padding: 0 !important;

	display: flex !important;
	align-items: center !important;

	height: 45px !important;
}

#review .box ul.star {
	display: flex !important;
	align-items: center !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
	white-space: nowrap !important;
}

#review .box ul.star li {
	display: inline-block !important;

	margin: 0 !important;
	padding: 0 !important;

	font-family: Arial, sans-serif !important;
	font-size: 23px !important;
	font-weight: normal !important;
	line-height: 1 !important;
}

#review .box ul.star li.good {
	color: #e7bf27 !important;
}

#review .box ul.star li.bad {
	color: #d7c875 !important;
}


/* 星数 */

#review .star_count {
	display: inline-block !important;

	margin-left: 8px !important;

	font-family: Arial, sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	color: #222 !important;
}


/* =========================================================
   投稿日
   ========================================================= */

#review .box p.name {
	grid-column: 1 !important;
	grid-row: 2 !important;

	margin: 0 !important;
	padding: 10px 0 12px 22px !important;

	font-size: 13px !important;
	line-height: 1.5 !important;

	color: #333 !important;

	border: none !important;

	box-sizing: border-box !important;
}

#review .box p.name:before {
	content: "◷" !important;

	position: absolute !important;

	margin-left: -21px !important;
	margin-top: -2px !important;

	font-size: 17px !important;
	line-height: 1 !important;

	color: #222 !important;
}


/* =========================================================
   タイトル
   ========================================================= */

#review .box h3 {
	grid-column: 2 !important;
	grid-row: 1 !important;

	margin: 0 0 12px !important;
	padding: 0 !important;

	font-size: 27px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;

	color: #222 !important;

	border: none !important;
	background: none !important;
}


/* =========================================================
   商品名
   ========================================================= */

#review .box h3 + p {
	grid-column: 2 !important;
	grid-row: 2 !important;

	margin: 0 0 5px !important;
	padding: 0 !important;

	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;

	color: #0068b7 !important;
}

#review .box h3 + p a {
	color: #0068b7 !important;
	text-decoration: none !important;
}

#review .box h3 + p a:hover {
	text-decoration: underline !important;
}


/* =========================================================
   レビュー本文
   ========================================================= */

#review .box p:not(.name):not(.review_edit_action) {
	line-height: 1.8 !important;
	color: #222 !important;
}

#review .review_comment {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
}

#review .box p span[m\:id="REVIEW_COMMENT_HERE"] {
	display: inline !important;

	font-size: 16px !important;
	line-height: 1.8 !important;
	color: #222 !important;

	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	white-space: normal !important;
	word-break: break-word !important;
}


/* =========================================================
   変更するボタン
   本文の下に配置（高さに含める）
   ========================================================= */

#review .review_edit_action {
	position: static !important;

	margin: auto 0 0 !important;
	padding: 0 !important;

	text-align: right !important;
}

#review .review_edit_action span {
	margin: 0 !important;
	padding: 0 !important;
}

#review .review_edit_action a {
	display: inline-block !important;

	width: 180px !important;
	height: 40px !important;

	margin: 0 !important;
	padding: 0 !important;

	box-sizing: border-box !important;

	border: none !important;
	border-radius: 3px !important;

	background: #d7487d !important;

	color: #fff !important;

	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 40px !important;

	text-align: center !important;
	text-decoration: none !important;

	box-shadow: none !important;
}

#review .review_edit_action a:hover {
	background: #c4386c !important;
	color: #fff !important;
}


/* =========================================================
   投稿者
   非表示
   ========================================================= */

#review .review_post_by {
	display: none !important;
}


/* =========================================================
   「参考になった」エリア
   ========================================================= */

#review .box + div[m\:id="IF_REVIEW_GOOD_BAD"] {
	width: 100% !important;

	margin: 0 0 30px !important;
	padding: 0 !important;

	box-sizing: border-box !important;
}

#review .good_button {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 15px 25px !important;

	box-sizing: border-box !important;

	background: #none !important;

	border-top: none !important;

	font-size: 14px !important;
	line-height: 1.5 !important;

	color: #555 !important;
}


/* 参考になったボタン */

#review .good_button input[type="image"] {
	display: inline-block !important;

	width: auto !important;
	height: auto !important;

	max-width: none !important;
	max-height: none !important;

	margin: 0 !important;
	padding: 0 !important;

	border: none !important;

	vertical-align: middle !important;
}


/* OFF状態 */

#review .good_button img {
	display: inline-block !important;

	width: auto !important;
	height: auto !important;

	max-width: none !important;
	max-height: none !important;

	margin: 0 !important;

	vertical-align: middle !important;
}


/* 人数表示は非表示 */

#review .good_number {
	display: none !important;
}


/* =========================================================
   レビュー間の余白
   ========================================================= */

#review [m\:id="LOOP_REVIEW"] {
	display: block !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   ページャー
   ========================================================= */

#review .pagelink {
	display: flex !important;

	justify-content: center !important;
	align-items: center !important;

	gap: 5px !important;

	margin: 40px 0 0 !important;
	padding: 0 !important;

	font-size: 14px !important;
}

#review .pagelink a {
	display: inline-block !important;

	padding: 8px 12px !important;

	border: 1px solid #ddd !important;
	border-radius: 4px !important;

	background: #fff !important;

	color: #333 !important;

	text-decoration: none !important;
}


/* =========================================================
   スマートフォン
   ========================================================= */

@media screen and (max-width: 767px) {

	.member_review_page_wrap {
		padding: 25px 12px 50px !important;
		margin-top: 150px !important;
	}


	/* ページタイトル */

	#review > form > h2 {
		font-size: 21px !important;
	}

	#review .pageguide {
		font-size: 12px !important;
	}

	#review > form > p:not(.pageguide) {
		font-size: 12px !important;
	}


	/* レビューカード */

	#review .box {
		display: block !important;

		min-height: auto !important;
		height: auto !important;
		max-height: none !important;

		margin-top: 20px !important;

		padding: 20px 16px !important;

		border-radius: 10px !important;
	}

	#review .box:before {
		display: none !important;
		content: none !important;
	}

	#review .review_side {
		margin-bottom: 16px !important;
	}


	/* 商品画像 */

	#review .review_item_image {
		width: 150px !important;
		height: 150px !important;

		margin: 0 auto 15px !important;
	}

	#review .review_product_image {
		height: 135px !important;
		max-width: 115px !important;
		max-height: 135px !important;
	}


	/* 星 */

	#review .box > div[m\:id="IF_STAR"] {
		display: flex !important;

		height: auto !important;

		margin-bottom: 12px !important;
	}

	#review .box ul.star li {
		font-size: 21px !important;
	}

	#review .star_count {
		font-size: 16px !important;
	}


	/* タイトル */

	#review .box h3 {
		font-size: 21px !important;
		line-height: 1.5 !important;
	}


	/* 商品名 */

	#review .box h3 + p {
		font-size: 14px !important;
		line-height: 1.7 !important;
	}


	/* 投稿日 */

	#review .box p.name {
		margin: 10px 0 20px !important;
		padding: 10px 0 10px 22px !important;

		border: none !important;
	}


	/* コメント */

	#review .box p span[m\:id="REVIEW_COMMENT_HERE"] {
		font-size: 14px !important;
		line-height: 1.8 !important;
	}


	/* 変更ボタン */

	#review .review_edit_action {
		position: static !important;

		margin: 20px 0 0 !important;

		text-align: center !important;
	}

	#review .review_edit_action a {
		width: 100% !important;
		max-width: 220px !important;
	}


	/* 参考になった */

	#review .good_button {
		flex-wrap: wrap !important;

		padding: 15px !important;

		font-size: 12px !important;
	}
}