/*---------------------------------------------
					Guide
----------------------------------------------*/

.main-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 50px;
}

.filter {
	width: 100%;
}

.guide-list-main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1100px;
	max-width: 100%;
	margin: 0 auto;
}

.guide-list-main:after {
	content: "";
	width: calc(100% / 3);
	display: block;
}

.guide-list-item {
	width: calc(100% / 3);
	padding: 10px;
	background-color: #fffbed;
	margin-bottom: 0px;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	transition: all 0.3s;
}

.guide-list-item:nth-child(even) {
	background-color: #fffbf7;
}

.guide-item-left {
	width: 120px;
}

.guide-item-right {
	width: calc(100% - 120px);
	padding: 0 0 0 10px;
	position: relative;
}

.guide-item-right .right-top {
	display: flex;
}

.guide-item-right .name-wrap {
	width: 50%;
	flex-shrink: 0;
}

.guide-img-wrap img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	margin-bottom: 5px;
}

.guide-list-tag {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	position: absolute;
	top: -22px;
	left: 0;
	margin: 0 auto;
}

.guide-list-tag li {
	font-size: 12px;
	padding: 0 10px;
	color: #fff;
	border-radius: 5px 5px 0 0;
}

.guide-area {
	background-color: #ab50ab;
}

.guide-genre {
	background-color: #830900;
}

.guide-name {
	font-size: 16.38px;
	font-weight: 700;
	line-height: 1.8;
	margin-bottom: 5px;
}

.guide-title {
	font-weight: 700 !important;
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 0;
	padding-bottom: 10px;
	border-bottom: dotted 1px #bbb;
}

.guide-comment {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	width: 100%;
	margin-top: 5px;
}

.no-rating {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 700;
}

.star5_rating {
	position: relative;
	z-index: 0;
	display: inline-block;
	white-space: nowrap;
	color: #CCCCCC;
}

.rating {
	font-weight: 700;
}

.star5_rating:before,
.star5_rating:after {
	content: '\2605\2605\2605\2605\2605';
}

.star5_rating:after {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #ffcf32;
}

.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 */


/*---------------------------------------------
			collaborator        
----------------------------------------------*/
.collaborators-hp-link {
	display: block;
	width: 120px;
	padding: 5px;
	text-align: center;
	background-color: #ff9800;
	color: #fff;
	border-radius: 3px;
	margin-top: 10px;
	line-height: 1;
}

.collaborators-sns {
	list-style: none;
	padding: 0;
	margin: 10px auto 0;
	display: flex;
}

.collaborators-sns li {
	width: 30px;
}

.collaborators-sns i {
	font-size: 24px;
}

.fa-facebook-square {
	color: #3b5998;
}

.fa-twitter-square {
	color: #00acee;
}

.fa-instagram-square {
	color: #3f729b;
}

/*---------------------------------------------

					PC

----------------------------------------------*/
@media only screen and (min-width: 1024px) and (max-width: 1360px) {}

/*---------------------------------------------

					Tablet

----------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.guide-list-main {
		width: calc(100% - 2) !important;
	}

	.guide-list-item {
		width: calc(100% / 2 - 5px);
		margin-bottom: 10px;
	}

	.guide-list-main:after {
		width: calc(100% / 2 - 5px);
	}

	.guide-img-wrap img {
		height: 120px;
	}

}

/*---------------------------------------------

					Mobile

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

	#sidebar {
		width: 100%;
		margin-bottom: 50px;
	}

	.guide-list-main {
		width: 100%;
	}

	.guide-list-item {
		width: 100%;
		margin-bottom: 0;
	}

	.guide-title {
		font-size: 12px;
	}

}