@charset "utf-8";
/* CSS Document */

#costume {
	background-image: linear-gradient( 90deg, rgb(255,241,226) 0%, rgb(255,252,228) 51%, rgb(255,254,243) 100%);
	padding: 0 0 100px 0;
}
#costume h1 {
	font-size: 28px;
	margin: 0 0 40px 0;
	padding: 0;
}
.wrapper {
	width: 1140px;
	min-width: 1140px;
	padding: 0 20px;
	margin: 0 auto;
	position: relative;
}
.page-shoplist .main_visual {
	font-size: 18px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-image: url("/assets/img/costume/main_bg.webp");
	padding: 0;
	margin-bottom: 30px;
}
.page-shoplist .main_visual img {
	display: block;
}
.page-shoplist .main_visual .inner_wrap {
	position: relative;
}
.page-shoplist .main_visual .area_name {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 58px;
	top: 54px;
	width: 202px;
	height: 42px;
	color: #FFFFFF;
	font-size: 20px;
}
.shop_link_btns {
	padding: 10px;
	margin-top: auto;
}
.shop_link_btns ul {
	justify-content: space-around;
}
.shop_link_btns .big_size {
	width: 100%;
	margin-right: 0;
	margin-bottom: 0;
	box-shadow: none;
}
.shop_link_btns .big_size a,
.shop_link_btns .big_size button {
	font-size: 16px;
}
.shop_link_btns .pink_btn {
	margin-top: 10px;
	padding: 15px;
	text-align: center;
}
.costume_list {
	display: flex;
	flex-wrap: wrap;
}
.costume_list li {
	display: flex;
	flex-direction: column;
	width: 32%;
	margin-right: 2%;
	margin-bottom: 4%;
	box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
	border-radius: 5px;
	position: relative;
	background-color: #FFFFFF;
}
.costume_list li .costume_images {
	display: flex;
	flex-direction: row;
	width: 100%;
	border-radius: 5px 5px 0 0;
}
.costume_list li .costume_images figure {
	width: 100%;
	overflow: unset;
}
.costume_list li:nth-child(3n) {
	margin-right: 0;
}
.costume_list li figure {
	border-radius: 5px 5px 0 0;
	overflow: hidden;
	height: 200px;
	width: 100%;
	margin: 0;
	display: none;
	justify-content: center;
	align-items: center;
}
.costume_list li figure:first-child {
	border-radius: 5px 5px 0 0;
	overflow: hidden;
	height: 200px;
	width: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.costume_list li figure video,
.costume_list li figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.costume_list li p {
	text-align: justify;
	padding: 10px 10px 0 10px;
	font-size: 13px;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.costume_list li p br {
	display: none;
}
.costume_list li p img {
	width: auto;
	height: 14px;
	vertical-align: middle;
}
.costume_list li .costume_shop {
	padding: 10px 10px 0 10px;
}
.costume_list li .costume_shop span{
	display: block;
	font-size: 12px;
}
.costume_list li .costume_shop a{
	display: inline-block;
	max-width: 100%;
	color: #E96B8C;
	font-weight: bold;
	font-size: 16px;
	line-height: 130%;
}
.costume_list li .costume_shop .area_genre {
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	padding-bottom: 5px;
}
.costume_list li .vip_tweet {
	position: absolute;
	left: 7px;
	top: 186px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	height: 28px;
	padding: 0 15px;
	background-color: #ff3f71;
	color: #FFFFFF;
	letter-spacing: 2px;
	line-height: 1;
	border: solid 1px #fff;
	font-size: 14px;
	z-index: 5;
}
.costume_list li .pink_btn {
	background-color: #ff98b7;
}
.costume_list li .pink_btn a {
	color: #fff;
}
.pagination.pagination_top {
	font-size: 16px;
	font-weight: bold;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 26px;
}
.pagination.pagination_bottom {
	font-size: 16px;
	font-weight: bold;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 100px;
	margin-top: -30px;
}
.pageing {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.pagination.pagination_top .p-number {
	margin-right: 10px;
	font-weight: normal;
}
.pagination.pagination_top strong {
	font-size: 24px;
	font-weight: bold;
	color: #ff628a;
}
.pagination > ul > li > a {
	background-color: rgba(255,255,255,1.00);
	margin-left: 5px;
	text-align: center;
	padding: 3px 9px;
	font-size: 16px;
	color: #2D2D2D;
	border: 1px solid #bbbbbb;
}
.pagination > ul > li:first-child a {
	margin-left: 0;
	opacity: 0.4;
	background-color: #999;
}
.pagination > ul > li:first-child a:hover {
	color: unset;
	background-color: #999;
}
.pagination > ul > li > a:hover,
.pagination > ul > li > a.active {
	background-color: #b99966;
	color: #FFF;
}
.template_ttl .fs-min {
	font-size: 20px;
	padding-left: 20px;
}
.area_change {
	background-color: #ffffff;
	padding: 15px;
	margin: 0 0 30px 0;
	overflow: hidden;
	box-shadow: 0px 0px 5px 2px rgb(0 0 0 / 5%);
	display: flex;
	align-items: center;
}
.area_change dl,
.area_change dd,
.area_change dt {
	padding: 0;
	margin: 0;
}
.area_change dt {
	display: none;
}
.area_change ul {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}
.area_change ul li {
	margin: 5px 15px 5px 0;
	width: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.area_change ul li:nth-of-type(8n) {
	margin: 5px 0px 5px 0;
}
.area_change ul li a {
	width: 100%;
}

.area_change ul li .caferun_btn {
	background-color: #FFFFFF;
	color: #ff98b7;
	border: 1px solid #ff98b7;
	border-radius: 5px;
	display: block;
	text-align: center;
	padding: 10px 0;
	font-size: 16px;
	font-weight: bold;
}
.part_btns .active {
	background-color: rgb(255, 152, 183);
	color: #fff;
	border-radius: 5px;
	display: block;
	text-align: center;
	padding: 10px 0;
	font-size: 16px;
	font-weight: bold;
	width: 100%;
}

.lists_info_bottom {
	margin-top: 45px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.lists_info_bottom .hit_count .show_now {
	display: flex;
	justify-content: flex-start;
}
.lists_info_bottom .pageing {
	display: flex;
	align-items: center;
}
.lists_info_bottom .pageing li {
	margin-left: 10px;
}
.lists_info_bottom .pageing li:hover {
	opacity: 0.8;
}
.lists_info_bottom .pageing li:first-child a, .lists_info_bottom .pageing li:last-child a {
	padding: 10px 12px;
}
.lists_info_bottom .pageing li a {
	padding: 10px 19px;
	font-size: 18px;
	color: #525252;
	border-radius: 5px;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 0px 3px rgba(71, 71, 71, 0.25);
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
}
.lists_info_bottom .pageing li a.active {
	background-color: #ff98b7;
	color: #ffffff;
}

@media screen and (max-width: 760px) {
	.page-shoplist .main_visual img {
		display: block;
		width: 100%;
	}
	.page-shoplist .main_visual img {
		display: block;
		width: 100%;
	}
	.page-shoplist .main_visual .inner_wrap {
		position: relative;
	}
	.page-shoplist .main_visual .area_name {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 3%;
		top: 9%;
		width: 27vw;
		height: 7vw;
		color: #FFFFFF;
		font-size: 3.5vw;
	}
	.shop_link_btns {
		margin: 0;
		padding: 4vw;
	}
	.shop_link_btns:before {
		height: 0;
	}
	.shop_link_btns .big_size {
		margin: 0;
		padding: 1vw;
	}

	#costume h1 {
		font-size: 5vw;
		margin: 0 0 5vw 0;
		padding: 0 0;
		line-height: 1;
	}
	.mw {
		width: 100%;
		min-width: 100%;
		/* padding: 0 4vw; */
		margin: 0 auto;
		position: relative;
	}
	.area_change {
		display: block;
		padding: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.area_change dt {
		display: flex;
		justify-content: center;
		color: #ff98b7;
		border: solid 1px #ff98b7;
		background-color: #FFFFFF;
		border-radius: 1vw;
		padding: 3vw;
		font-size: 4vw;
		font-weight: bold;
		cursor: pointer;
	}
	.area_change dd {
		display: none;
	}
	.area_change {
		margin: 0 0 2vw 0;
	}
	.wrapper {
		width: 100%;
		min-width: 100%;
	}
	#costume p {
		font-size: 3.5vw;
	}
	.costume_list {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
	.costume_list ul {
		justify-content: space-between;
	}
	.costume_list li {
		width: 100%;
		margin: 0 0 6vw 0;
	}
	.costume_list li .big_size {
		width: 100%;
	}
	.costume_list li .costume_images {
		overflow-x: scroll;
	}
	.costume_list li .vip_tweet {
		position: absolute;
		left: 2vw;
		top: 87vw;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50px;
		height: 6vw;
		padding: 0 4vw;
		background-color: #ff3f71;
		color: #FFFFFF;
		letter-spacing: 2px;
		line-height: 1;
		border: solid 1px #fff;
		font-size: 3.4vw;
		z-index: 5;
	}
	.costume_list li .costume_shop .area_genre {
		display: flex;
		justify-content: space-between;
		padding-top: 3vw;
		padding-bottom: 1.5vw;
	}
	.costume_list li .costume_shop span {
		display: block;
		font-size: 3vw;
	}
	.costume_list li .costume_shop a {
		display: inline-block;
		max-width: 100%;
		color: #9b6565;
		font-weight: bold;
		font-size: 4.5vw;
		line-height: 150%;
	}
	.costume_list li .costume_shop {
		padding: 2vw 4vw 0 4vw;
	}
	.costume_list li p {
		text-align: justify;
		padding: 2vw 4vw 0 4vw;
	}
	.part_job_btn_bgc {
		width: 100%;
		padding: 3vw 0;
		font-size: 4vw;
		font-weight: bold;
		border-radius: 1vw;
		background-color: rgb(255, 152, 183);
		color: #fff;
		margin: 0;
		display: flex;
		justify-content: center;
	}
	.pagination_top .pageing{
		display: none;
	}
	.pagination.pagination_top {
		font-size: 4vw;
		font-weight: bold;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-bottom: 2vw;
		align-items: flex-end;
	}
	.area_change.open dd {
		padding: 23vw 4vw 4vw 4vw;
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;
		z-index: 50000;
		background-color: #FFFFFF;
		overflow-y: auto;
	}
	.area_change.open dd ul li a {
		color: #ff98b7;
		width: 100%;
		height: 100%;
		font-weight: bold;
		line-height: 1;
		background-color: initial;
		font-size: 4vw;
		display: flex;
		padding: 0;
		padding: 3.6vw 2.8vw;
		background-color: #fffef9;
		border: 1px solid #dddddd;
	}
	.part_btns .active {
		font-size: 4vw;
		background-color: rgb(255, 152, 183);
		color: #fff;
		border-radius: 1vw;
		display: block;
		text-align: left;
		padding: 3.6vw 2.8vw;
		font-size: 4vw;
		font-weight: bold;
		width: 100%;
	}
	.area_change ul li {
		margin: 0 0 4vw 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sp_modal_head {
		width: 100%;
		height: 15vw;
		font-size: 6vw;
		font-weight: bold;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		padding: 0;
		line-height: 1;
		z-index: 2;
		background: linear-gradient(90deg, #FF98B7 0%, #FFA5D6 32.64%, #F0D7FF 77.95%, #D7DBFF 100%);
	}
	.sp_modal_head button {
		position: absolute;
		display: block;
		background-color: #fff;
		color: #ff98b7;
		border-radius: 1vw;
		font-size: 3.6vw;
		left: 4vw;
		line-height: 1;
		padding: 1.8vw 4vw;
	}
	.costume_list li figure video,
	.costume_list li figure img{
		width: auto;
	}
	.costume_list li figure,
	.costume_list li figure:first-child {
		border-radius: 5px 5px 0 0;
		overflow: unset;
		height: 90vw;
		width: 100%;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 2vw;
	}
	.costume_list li figure:last-child {
		margin-right: 0;
	}
	.pagination.pagination_bottom {
		font-size: 4vw;
		font-weight: bold;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-bottom: -10vw;
		margin-top: -4vw;
	}
	.pagination.pagination_bottom {
		flex-wrap: wrap;
	}
	.pagination > ul {
		box-sizing: border-box;
		display: flex;
		list-style: none;
		justify-content: center;
		padding: 5vw 0 0 0;
		width: 100%;
	}

	.hit_count {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 4vw;
	}
	.hit_count .hit_total {
		font-size: 3.7vw;
		font-weight: normal;
	}
	.hit_count .hit_total span {
		font-size: 4.3vw;
		font-weight: bold;
	}
	.hit_count .show_now {
		margin-top: 4px;
		font-size: 3.7vw;
	}
	.lists_info_bottom {
		flex-direction: column;
	}
	.lists_info_bottom .hit_count {
		margin-top: 0;
	}
	.lists_info_bottom .pageing {
		margin-top: 4vw;
		justify-content: center;
	}
	
	.lists_info_bottom .pageing li {
		height: auto;
		margin-left: 3vw;
		border-radius: 2vw;
		box-shadow: 0px 0px 1vw rgba(71, 71, 71, 0.25);
	}
	.lists_info_bottom .pageing li:first-child {
		margin-left: 0;
	}
	
	.lists_info_bottom .pageing li:first-child a,
	.lists_info_bottom .pageing li:last-child a {
		padding: 2.4vw 0;
	
	}
	.lists_info_bottom .pageing li a {
		font-size: 4vw;
		line-height: 1;
		width: 10.6vw;
		min-width: 10vw;
		padding: 2.4vw 0;
		display: flex;
		justify-content: center;
		min-width: initial;
		height: auto;
	}
	.lists_info_bottom .search_box {
		margin-top: 7.5vw;
	}
}





/* ------------------------------------------------- */
/* 横タイプの条件絞り込み（ランキング・注目のアルバイト等で仕様） */
/* ------------------------------------------------- */
.search_box_row {
	display: flex;
	width: 1100px;
	background-color: #fff;
	box-shadow: 0px 0px 3px rgba(71, 71, 71, 0.25);
	padding: 0;
	margin: 40px auto !important;
}
.search_box_row > div {
	flex: 1;
	padding: 20px;
}
.search_box_row > div:not(:last-child) {
	border-right: 1px solid #ddd;
}
.search_box_row > div button {
	width: 100%;
	padding: 10px 15px 10px 18px;
	margin-top: 10px;
	text-align: left;
}
.search_box_row > div button:after {
	content: "変更";
}
.search_box_row .area_icon {
	padding-left: 27px;
	position: relative;
	line-height: 1;
	font-size: 18px;
}
.search_box_row .area_icon:before {
	content: "";
	position: absolute;
	left: 0;
	background-size: contain;
	background-repeat: no-repeat;
}
.search_box_row .area .area_icon:before {
	width: 18px;
	height: 20px;
	top: 2px;
	background-image: url("/assets/img/global/icon/area_icon.webp");
}
.search_box_row .genre .area_icon:before {
	width: 18px;
	height: 20px;
	top: 2px;
	background-image: url("/assets/img/global/icon/genre_icon.webp");
}
.search_box_row .concept .area_icon:before {
	width: 18px;
	height: 20px;
	top: 2px;
	background-image: url("/assets/img/global/icon/concept_icon.webp");
}

.search_box_row .select_term_box {
	padding: 10px 15px 10px 18px;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	cursor: pointer;
	border: 1px solid #8e8e8e;
	background-color: #ffe061;
}

@media screen and (max-width: 760px){
	.search_box_row {
		display: block;
		width: auto;
		margin: 5vw 4vw !important;
		border-radius: 2vw;
	}
	.search_box_row > div {
		flex: 1;
		padding: 2vw;
	}
	.search_box_row > div:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid #ddd;
	}
	.search_box_row .area,
	.search_box_row .genre,
	.search_box_row .concept {
		display: flex;
	}
	.search_box_row .area {
		border-radius: 2vw 2vw 0 0;
	}
	.search_box_row .area_icon {
		padding-left: unset;
		font-size: 4vw;
	}
	.search_box_row .area .area_icon:before,
	.search_box_row .genre .area_icon:before,
	.search_box_row .concept .area_icon:before {
		display: none;
	}
	.search_box_row > div:before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 7vw;
		min-width: 7vw;
		height: 7vw;
		min-height: 7vw;
		margin: auto 0;
	}
	.search_box_row > .area:before {
		background-image: url("/assets/img/global/icon/area_icon.webp");
		background-size: 7vw 7vw;
	}
	.search_box_row > .genre:before {
		background-image: url("/assets/img/global/icon/genre_icon.webp");
		background-size: 7vw 7vw;
	}
	.search_box_row > .concept:before {
		background-image: url("/assets/img/global/icon/concept_icon.webp");
		background-size: 7vw 7vw;
	}
	.search_box_row .inner_wrap {
		display: flex;
		flex-flow: column;
		width: 100%;
		padding-left: 3vw;
	}
	.search_box_row > div button {
		padding: unset;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	.search_box_row > div button:after {
		content: "";
	}
	.search_box_row > div .right_text {
		width: min(50px, 12vw);
		display: flex;
		align-items: center;
	}
	.search_box_row > div:after {
		content: "\f105";
		font-family: "FontAwesome";
		font-size: 5.2vw;
		display: flex;
		align-items: center;
	}
	.search_box_row .select_term_box {
		border: none;
		background-color: unset;
		font-size: 3vw;
		margin-top: 1vw;
		padding: unset;
		color: #ff7949;
	}
}

.shop_detail_link {
	position: relative;
	background-color: #bc9c70;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	overflow: hidden;
	color: #FFFFFF;
	padding: 10px 0;
	font-weight: bold;
	width: 100%;
	font-size: 16px;
	background: linear-gradient(180deg, rgba(255,167,44,1) 0%, rgba(255,107,0,1) 100%);
}
.shop_detail_link::before {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3px;
	margin-right: 10px;
	width: 20px;
	height: 20px;
	font-size: 110%;
	text-indent: 2px;
	content: '\f105';
	font-family: FontAwesome;
	background-color: #FFFFFF;
	overflow: hidden;
	border-radius: 50%;
	color: rgba(255,167,44,1);
	font-weight: normal;
}
@media screen and (max-width: 760px){
	.shop_detail_link {
		position: relative;
		background-color: #bc9c70;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		overflow: hidden;
		color: #FFFFFF;
		padding: 2.5vw 0;
		font-weight: bold;
		width: 100%;
		font-size: 4.5vw;
		background: linear-gradient(180deg, rgba(255,167,44,1) 0%, rgba(255,107,0,1) 100%);
	}
	.shop_detail_link::before {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 1.5vw;
		width: 4.5vw;
		height: 4.5vw;
		font-size: 110%;
		text-indent: 2px;
		content: '\f105';
		font-family: FontAwesome;
		background-color: #FFFFFF;
		overflow: hidden;
		border-radius: 50%;
		color: rgba(255,167,44,1);
		font-weight: normal;
	}
}