@charset "utf-8";

/*===================================
 CSS INFO
 Description : kuchikomi css
=====================================*/

.kuchikomi-head{
	position: relative;
	height: 300px;
	margin-top: 30px;
	margin-bottom: 40px;
}
.kuchikomi-head-ttl{
	background-color: rgba(255,255,255,0.8);
	width: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	padding: 20px;
	text-align: center;
}
.kuchikomi-head-ttl h1{
	font-size: 24px;
	margin-bottom: 10px;
}
.kuchikomi-head-ttl p{
	margin: 0;
}
.kuchikomi-head-img{
	position: absolute;
	top: 0;
	z-index: -1;
}

.review-ranking-higher,.review-ranking{
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
}
.review-ranking-higher .review-rank-item{
	width: 20%;
}
.review-ranking .review-rank-item{
	width: 33.333333%;
}
.review-rank-item{
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 15px;
}
.review-rank-item dl{
	border: 1px solid var(--light-gray);
	background-color: #fff;
	margin: 0;
	padding: 10px;
}
.review-ranking-higher .review-rank-item dl{
	text-align: center;
	position: relative;
}
.review-ranking .review-rank-item dl{
	padding-left: 90px;
	position: relative;
}
.review-rank-item dl dt{
	font-weight: bold;
}
.review-ranking-higher .review-rank-logo{
	display: block;
	margin: 0 auto 10px;
}
.review-ranking .review-rank-logo{
	width: 70px;
	position: absolute;
	top: 10px;
	left: 10px;
}
.review-rank-item .review-rank-eval img{
	vertical-align: middle;
}
.review-rank-item .review-rank-eval .review-eval-num{
	font-weight: normal;
	font-size: 14px;
	vertical-align: -3px;
}

.review-num-link{
	font-size: 12px;
}
.review-num-link.icn:before{
	font-size: 17px;
	margin-right: 3px;
}
.review-rank-item.no1 dl:before,
.review-rank-item.no2 dl:before,
.review-rank-item.no3 dl:before,
.review-rank-item.no4 dl:before,
.review-rank-item.no5 dl:before{
	position: absolute;
	top: 0;
	left: 5px;
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
	padding-top: 7px;
	font-weight: bold;
}
.review-rank-item.no1 dl:after,
.review-rank-item.no2 dl:after,
.review-rank-item.no3 dl:after,
.review-rank-item.no4 dl:after,
.review-rank-item.no5 dl:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 15px 0 15px;
	position: absolute;
	top: 30px;
	left: 5px;
}
.review-rank-item.no1 dl:before{
	content: "1";
	background-color: #ffea29;
}
.review-rank-item.no2 dl:before{
	content: "2";
	background-color: #c8d3d5;
}
.review-rank-item.no3 dl:before{
	content: "3";
	background-color: #c69c6d;
}
.review-rank-item.no4 dl:before{
	content: "4";
	background-color: #8ed6df;
}
.review-rank-item.no5 dl:before{
	content: "5";
	background-color: #8ed6df;
}

.review-rank-item.no1 dl:after{
	border-color: #ffea29 transparent transparent transparent;
}
.review-rank-item.no2 dl:after{
	border-color: #c8d3d5 transparent transparent transparent;
}
.review-rank-item.no3 dl:after{
	border-color: #c69c6d transparent transparent transparent;
}
.review-rank-item.no4 dl:after{
	border-color: #8ed6df transparent transparent transparent;
}
.review-rank-item.no5 dl:after{
	border-color: #8ed6df transparent transparent transparent;
}

.helpful-count{}
.helpful-count dl{
	position: relative;
	border-bottom: 1px dotted var(--gray);
	height: 74px;
	margin: 0 0 14px;
	width: 100%;
}
.helpful-count dl:last-child{
	border-bottom: none;
	margin-bottom: 0;
	height: 60px;
}
.helpful-count dl dt{
	background-color: #f2f2f2;
	width: 60px;
	height: 60px;
	position: absolute;
	left: 0;
	text-align: center;
	font-size: 12px;
	padding-top: 7px;
	font-weight: bold;
}
.helpful-count dl dt img{
	width: 30px;
	height: auto;
	display: block;
	margin: 0 auto;
}
.helpful-count dl dd{
	padding-left: 70px;
}
.helpful-count dl dd img,
.helpful-count dl dd .review-eval-num{
	vertical-align: -2px;
}
.newcomment-count .review-list-item:first-child{
	padding-top: 0;
}
.newcomment-count .review-list-item:last-child{
	border-bottom: 0;
}

.newcomment-count .review-comment dl{
	margin: 0;
}
.newcomment-count .review-cmt-eval img,
.newcomment-count .review-cmt-eval .review-eval-num{
	vertical-align: -2px;
}

.review-rank-item-hed{
	text-align: center;
}
.review-rank-item-hed h3{
	font-size: 21px;
	margin-bottom: 0;
}
.review-rank-item-hed p{
	margin-top: 5px;
}
.rank-by-item .review-rank-item{
	width: 31.5%;
	border: 1px solid var(--light-gray);
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 20px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
}
.rank-by-item .review-rank-item dl{
	border-top: 1px dotted var(--gray);
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	padding-left: 90px;
	padding-top: 15px;
	padding-bottom: 15px;
}
.review-ranking.rank-by-item .review-rank-logo{
	width: 50px;
	top: 15px;
	left: 35px;
}
.rank-by-item .review-rank-eval-item dl:before{
	position: absolute;
	top: 15px;
	left: 0;
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
	padding-top: 7px;
	font-weight: bold;
}
.rank-by-item .review-rank-eval-item dl:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 15px 0 15px;
	position: absolute;
	top: 45px;
	left: 0;
}
.rank-by-item .review-rank-eval-item.no1 dl:before{
	content: "1";
	background-color: #ffea29;
}
.rank-by-item .review-rank-eval-item.no2 dl:before{
	content: "2";
	background-color: #c8d3d5;
}
.rank-by-item .review-rank-eval-item.no3 dl:before{
	content: "3";
	background-color: #c69c6d;
}
.rank-by-item .review-rank-eval-item.no1 dl:after{
	border-color: #ffea29 transparent transparent transparent;
}
.rank-by-item .review-rank-eval-item.no2 dl:after{
	border-color: #c8d3d5 transparent transparent transparent;
}
.rank-by-item .review-rank-eval-item.no3 dl:after{
	border-color: #c69c6d transparent transparent transparent;
}
.review-rank-eval-item dl dt span{
	white-space: nowrap;
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
}
.review-photo-wrap{
	display: flex;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-left: -10px;
}
.review-photo-item{
	width: 20%;
}
.review-photo-item dl{
	background-color: var(--pale-blue-gray);
	margin: 0 10px 20px;
	padding-bottom: 16px;
	text-align: center;
}
.review-photo-item dt{
	position: relative;
	margin-bottom: 5px;
}
.review-photo-item dt:before{
	content: "+";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255,255,255,0.8);
	border-radius: 80px;
	width: 32px;
	height: 32px;
	font-size: 20px;
	pointer-events:none
}
.review-photo-item img{
	width: auto;
	height: 100px;
}
.review-photo-item dd{
	font-size: 12px;
}
.review-photo-item a{
	color: var(--basic-text-color);
}

/*ブランド詳細*/
.review-brand-head{
	align-items: center;
}
.review-search-btn{
	text-align: center;
	margin: 30px 0;
}
.review-search-btn .btn{
	padding-right: 44px;
}
.review-plan-list{
	margin: -10px 0;
}
.review-plan-list li{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px dotted var(--gray);
	padding: 14px 0;
}
.review-plan-list li a{
	width: calc(100% - 160px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.review-plan-list li span{
	width: 160px;
	text-align: right;
}
.review-plan-list li .review-num-link.icn:before{
	color: var(--basic-blue);
	font-size: 20px;
}
.review-plan-list li:last-child{
	border-bottom: none;
}
.section-head.with-pagenate{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.section-head.with-pagenate .ttl-2 small{
	font-weight: normal;
}
.brand-review-list .review-list-item:last-child{
	border-bottom: none;
}
.brand-review-list .review-cmt-txt .review-cmt-eval{
	padding-right: 10px;
}
.brand-review-list .review-cmt-txt a{
	vertical-align: -3px;
}
.brand-review-list .review-comment .review-cmt-txt{
	margin-bottom: 4px;
}
.review-comment-action{
	margin: 0;
}
.review-comment-action li{
	display: inline-block;
	margin-right: 15px;
}
.review-comment-action li:before{
	margin-right: 3px;
}
.review-helpful-count:before,.review-photo-add:before{
	vertical-align: -6px;
}
.review-helpful-count:before{
	color: var(--blue-green);
}
.review-brand-reply:before{
	content: "";
	background-image: url(../img/icon_brand_reply.svg);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 24px;
	height: 21px;
	vertical-align: -4px;
}

/*口コミ詳細*/
.review-detail-content.container{
	width: 800px;
}
.review-detail-content .bran-head{
	padding: 15px;
}
.review-detail-content .brand-info-box .brand-name{
	font-size: 18px;
}
.review-detail-content .brand-logo-img{
	width: 70px;
	height: auto;
}
.review-user-comment{
	display: flex;
	flex-wrap: wrap;
}
.review-user-comment .review-user{
	width: 80px;
}
.review-user-comment .review-comment-detail{
	width: calc(100% - 80px);
	padding-left: 20px;
}
.rvw-cmt-date-wrap{
	display: flex;
	justify-content: space-between;
}
.rvw-cmt-date{
	margin-top: 0;
}
.rvw-cmt-helpful{
	margin-top: 0;
}
.rvw-cmt-helpful span{
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
}
.rvw-cmt-rateit{
	background-color: #ffface;
	border-radius: 6px;
	padding: 20px;
	margin-bottom: 30px;
}
.rvw-cmt-rateit .review-ex-total{
	background-color: #fff;
	border-radius: 80px;
	padding: 5px;
	margin-bottom: 20px;
}
.rvw-cmt-rateit .review-ex-total dt{
	font-size: 14px;
}
.rvw-cmt-rateit .review-ex-total dd img{
	vertical-align: inherit;
}
.rvw-cmt-rateit .review-ex-total dd .review-eval-num{
	font-size: 18px;
}
.review-comment-detail .review-ex-evaluation{
	margin: 0;
}
.rvw-cmt-photo ul{
	display: flex;
	flex-wrap: wrap;
}
.rvw-cmt-photo ul li{
	width: 33.333333%;
	text-align: center;
	margin-bottom: 15px;
	padding: 10px;
	position: relative;
}
.review-reply{
	border-top: 5px solid var(--light-gray);
	display: flex;
	flex-wrap: wrap;
	padding-top: 30px;
	padding-bottom: 30px;
}
.review-reply-logo{
	width: 80px;
	text-align: center;
}
.review-reply-commnet{
	width: calc(100% - 80px);
	padding-left: 20px;
}
.review-reply-date{
	margin-top: 0;
}
.review-helpful-wrap{
	text-align: center;
}
.review-helpful-wrap .btn-default{
	position: relative;
	min-width: 426px;
}
.review-helpful-wrap .btn-default:before{
	content: "\e8dc";
	font-family: var(--font-family-icn);
	font-size: 24px;
	color: #FFF;
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

/*投稿フォーム*/
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}

.kuchikomi-form-wrap{
	width: 800px;
	padding-top: 15px;
}

.kckm-form-item{}
.kckm-form-item > dt{
	background-color: var(--dl-dt-bg-color);
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}
.kckm-form-item > dd{
	margin-bottom: 24px;
	padding-left: 15px;
	padding-right: 15px;
}

.kckm-plan-ttl{
	font-size: 16px;
	display: block;
	margin-bottom: 10px;
}

.kckm-form-check{
	display: flex;
}
.kckm-form-checkbox{
	margin-right: 15px;
}
.kckm-form-checkbox label{}
.kckm-form-checkbox label input{
	display: none;
}
.kckm-form-checkbox label span{
	position: relative;
	padding-left: 27px;
	/*display: block;*/
	display: flex;
	align-items: center;
	cursor: pointer;
}

.kckm-form-checkbox label span:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0px;
	/*display: block;*/
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--light-gray);
	margin-right: 5px;
	background-color: #fff;
}
.kckm-form-checkbox label input[type="radio"]:checked + span:after{
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var(--basic-blue);
}

.kckm-form-textarea textarea{
	width: 100%;
}

.kckm-form-images li{
	margin-bottom: 10px;
}
.kckm-form-images li input[type="file"]{
	width: 100%;
}

.kckm-form-send .btn{
	width: 80%;
}

.evaluation-input{
	display: flex;
	align-items: center;
	border-bottom: 1px dotted var(--blue-gray);
	padding-bottom: 10px;
}
.evaluation-input dt{
	font-weight: bold;
	font-size: 18px;
	width: 300px;
}
.evaluation-input dt span{
	font-size: 14px;
	display: block;
	font-weight: normal;
}
.evaluation-input dd span[id^="ex"]{
	font-weight: bold;
	font-size: 30px;
	color: var(--basic-blue);
	padding-left: 10px;
	display: inline-block;
	vertical-align: middle;
}

/*送信アラート調整*/
.jconfirm.jconfirm-light .jconfirm-box{
	width: 50%;
}