/*Style Setting
=======================================*/
@charset "utf-8";

/*基本情報
--------------------*/

.floatleft{
	float: left;
}
.floatright{
	float: right;
}

.review_row {
	clear: both;
	margin: 50px 0 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  	grid-gap: 30px;
}
.column {
	padding: 10px;
	background-color: #f2f2f6;
	color: $ffffff;
	border: 1px solid #ffffff;
	border-radius: 15px;
}
.column p{
	display: -webkit-box;
	padding-left: 5px;
	padding-right: 5px;
	max-height: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	-webkit-mask-image: linear-gradient(150deg, #000 80%, transparent);
}
.comment_header{
	display:flex; 
	padding-bottom: 10px;
    justify-content: space-between;
}
.comment_rating{
	height: 30px;
	width: 40%;
	padding: 5px 5px 50px 5px;
}
.comment_rating b{
	display: -webkit-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.comment_info{
	height: 30px;
	width: 60%;
	color: #8c8c91;
	text-align: end;
	padding: 5px 0px 10px 5px;
}
.comment_name{
	display: -webkit-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.review_more{
	float: right;
	padding: 5px 10px 10px 0;
}
.review_more a{
	text-decoration-line: underline;
	color: deepskyblue;
}

.star5_rating{
	font-size: 1.5rem !important;
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    /*font-size: 30px; フォントサイズ 自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ee8834; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */


/*口コミリビューモーダル画面用*/
.reviews_contents{
	padding: 0 5vw !important;
}

.c-modalcmt__inner .reviews_button{
	width: 100%;
	padding-bottom: 10px;
	display: inline-block;
}
.c-modalcmt__inner .reviews_button .cancel{
	float: left;
	width: 100px;
	height: 30px;
	line-height: 0px !important;
}
.c-modalcmt__inner .reviews_button .submit{
	float: right;
	width: 100px;
	height: 30px;
	line-height: 0px !important;
}

.c-form2 .reviews_rating{
	padding: 5px 0 5px 0;
}
.c-form2 .reviews_evaluation{
	font-size: 23px !important;
	margin-left: 30px;
	margin-bottom: 0px;
}
.c-form2 .reviews_name{
	padding: 5px 0 5px 0;
}
.c-form2 .reviews_content{
	padding: 20px 0 5px 0;
}
.c-form2 .modal_label{
	padding-top:10px;
	font-size: 16px !important;
}
.c-form2 .modal_textarea{
	height: 300px;
	margin-bottom: 0px;
}
.c-table2{
	font-size:15px;
}
.c-table5{
	font-size:15px;
}