@charset "utf-8";

/*-------------------------------------------------*/
/*theme 専用css                                    */
/*-------------------------------------------------*/

/*-------------------------------------------------*/
/*タイトル画像エリア                               */
/*-------------------------------------------------*/
.theme_title_area {
	margin: 1em 0 0;
}
.theme_title_area .theme_title_inner {
	max-width: 400px;
	margin: auto;
}
/*-------------------------------------------------*/
/*本文                                             */
/*-------------------------------------------------*/
.theme_txt_area {
	margin: 1em 1.25em 1em;
	line-height: 1.3em;
}
.theme_txt_area .about_hachidori {
	margin-top: 2em;
}
.theme_txt_area .about_hachidori img {
	max-width: 400px;
	margin-top: 0.5em;
}
.theme_txt_area .note {
	margin-top: 2em;
}
.theme_txt_area .note span {
	background: var(--color-gray6);
	padding: 4px 12px;
	margin: 0 8px;
	border-radius: 12px;
}
/*-------------------------------------------------*/
/*一覧（search流用）                               */
/*-------------------------------------------------*/
#obj_list .inner {
	margin-left: 12px;
	margin-right: 12px;
}
#obj_list .inner ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -3px 0;
}
#obj_list .inner ul li {
	width: calc(100% / 3);
	padding: 3px;
	margin-top: 16px;
}
#obj_list .inner ul li .spec {
	margin-left: 4px;
	margin-right: 4px;
}
#obj_list .inner ul li .spec .name_group {
	font-size: 13px;
	line-height: 15px;
	letter-spacing: -0.5px;
	margin-top: 6px;
}
#obj_list .inner ul li .spec .works_price {
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	margin-bottom: 4px;
}
#obj_list .inner ul li .reaction {
	display: flex;
	flex-wrap: wrap;
}
#obj_list .inner ul li .reaction .count {
	min-width: 50px;
	max-width: 100px;
	border: 1px solid var(--color-gray6);
	border-radius: 16px;
	padding-left: 20px;
	padding-right: 6px;
	position: relative;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	margin-bottom: 4px;
}
#obj_list .inner ul li .reaction .count::before {
	content: '';
	position: absolute;
	top: 4px;
	left: 6px;
	background-repeat: no-repeat;
	background-size: cover;
}
#obj_list .inner ul li .reaction .cnt_nice::before {
	background-image: url(../images/icon_heart.svg);		/*@@@@*/
	width: 12px;
	height: 12px;
}
/*-------------------------------------------------*/
/*リンクエリア                                     */
/*-------------------------------------------------*/
.theme_link_area {
	margin: 2em auto 1em;
}
.theme_link_area .inner {
	background: var(--color-lightblue);
	border-radius: 8px;
	line-height: 1.3em;
	width: 90vw;
	max-width: 400px;
	text-align: center;
}
.theme_link_area .inner a {
	color: var(--color-white);
	display: inline-block;
	padding: 8px 16px;
	width: 100%;
}
/*-------------------------------------------------*/
/*レスポンシブ                                     */
/*ウィンドウ幅が最大768px以上に適用：タブレット    */
/*-------------------------------------------------*/
@media screen and (min-width: 768px) {
	/*---------------------------------------------*/
	/*タイトル画像エリア                           */
	/*---------------------------------------------*/
	.theme_title_area .theme_title_inner {
		max-width: 600px;
	}
	/*---------------------------------------------*/
	/*本文                                         */
	/*---------------------------------------------*/
	.theme_txt_area {
		margin: 2em auto 32px;
		max-width: 600px;
	}
	.theme_txt_area .about_hachidori img {
		max-width: 300px;
	}
	/*---------------------------------------------*/
	/*一覧（search流用）                           */
	/*---------------------------------------------*/
	#obj_list .inner ul li, #creatorslist #obj_list .inner ul li {
		width: calc(100% / 4);
	}
}
/*-------------------------------------------------*/
/*レスポンシブ                                     */
/*ウィンドウ幅が最大1281px以上に適用：PC           */
/*-------------------------------------------------*/
@media screen and (min-width: 1281px) {
	/*---------------------------------------------*/
	/*タイトル画像エリア                           */
	/*---------------------------------------------*/
	.theme_title_area .theme_title_inner {
		max-width: 900px;
	}
	/*---------------------------------------------*/
	/*本文                                         */
	/*---------------------------------------------*/
	.theme_txt_area {
		margin: 2em auto 32px;
		max-width: unset;
		width: 900px;
	}
	/*---------------------------------------------*/
	/*一覧（search流用）                           */
	/*---------------------------------------------*/
	#obj_list {
		width: 900px;
		margin: 2em auto 0;
	}
	#obj_list .inner ul {
		margin: 0 -12px 0;
    }
	#obj_list .inner ul li {
        margin-top: unset;
        margin-bottom: 16px;
        padding: 0 8px 8px;
    }
	#obj_list .inner ul li .spec .name_group {
        font-size: 15px;
        line-height: 18px;
    }
	#obj_list .inner ul li .spec .works_price {
        font-size: 18px;
        line-height: 22px;
    }
	#obj_list .inner ul li .reaction .count {
        padding-left: 24px;
        font-size: 14px;
        line-height: 22px;
    }
    #obj_list .inner ul li .reaction .count::before {
        top: 5px;
    }
	/*---------------------------------------------*/
	/*リンクエリア                                 */
	/*---------------------------------------------*/
	.theme_link_area .inner a:hover {
		background: #4BB3E5;
		border-radius: 8px;
	}
}