﻿@charset "UTF-8";

.mcs-readerCommentsBox01 {
	border: 1px solid #ffe1e3;
	border-radius: 3px;
}
.mcs-readerCommentsBox01 .mcs-satisfactionBlock {
	position: relative;
	padding: 36px 24px 12px;
	background: #fff0f1;
	text-align: center;
	box-sizing: border-box;
}
.mcs-readerCommentsBox01 .mcs-satisfactionBlock::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 554px;
	height: 28px;
	background: url(/mikke/about/images/index_img_24.png) 0 0 no-repeat;
}
.mcs-readerCommentsBox01 .mcs-readerCommentsBlock {
	padding: 22px 29px;
	background: #fff;
	box-sizing: border-box;
}
.mcs-readerCommentsBox01 .mcs-readerCommentsBlock .mcs-readerCommentsWrap {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 6px;
}
.mcs-readerCommentsBox01 .mcs-readerCommentsBlock .mcs-readerCommentsWrap .mcs-readerCommentsItem {
	display: flex;
	align-items: center;
	width: 50%;
}
.mcs-readerCommentsBox01 .mcs-readerCommentsBlock .mcs-readerCommentsWrap .mcs-readerCommentsItem:nth-child(n+3) {
	margin-top: 12px;
}
.mcs-readerCommentsBox01 .mcs-readerCommentsBlock .mcs-readerCommentsWrap .mcs-readerCommentsItem .mcs-readerImg {
	width: 60px;
}
.mcs-readerCommentsBox01 .mcs-readerCommentsBlock .mcs-readerCommentsWrap .mcs-readerCommentsItem .mcs-readerComment {
	width: calc(100% - 76px);
	margin-left: 16px;
}

@media screen and (max-width: 767px) {
	.mcs-readerCommentsBox01 .mcs-satisfactionBlock {
		padding: 44px 15px 12px;
	}
	.mcs-readerCommentsBox01 .mcs-satisfactionBlock::before {
		top: 16px;
		width: 100%;
		max-width: 320px;
		height: 28px;
		background: url(/mikke/about/images/index_img_24_sp.png) 0 0 no-repeat;
		background-size: contain;
	}
	.mcs-readerCommentsBox01 .mcs-readerCommentsBlock {
		padding: 22px 12px;
	}
	.mcs-readerCommentsBox01 .mcs-readerCommentsBlock .mcs-readerCommentsWrap {
		display: block;
	}
	.mcs-readerCommentsBox01 .mcs-readerCommentsBlock .mcs-readerCommentsWrap .mcs-readerCommentsItem {
		width: 100%;
	}
	.mcs-readerCommentsBox01 .mcs-readerCommentsBlock .mcs-readerCommentsWrap .mcs-readerCommentsItem:nth-child(2) {
		margin-top: 12px;
	}
	.mcs-readerCommentsBox01 .mcs-readerCommentsBlock .mcs-readerCommentsWrap .mcs-readerCommentsItem .mcs-readerImg {
		width: 100%;
		max-width: 60px;
	}
}
