@charset "utf-8";


/* ==================================================================== */
/* term_search
/* ==================================================================== */
#term_search{
	background-color: #F8F1F8;
	margin-bottom: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}
#term_search h2{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	cursor: pointer;
	margin-bottom: 0;
	position: relative;
	transition: opacity 0.2s ease-out 0s;
}
#term_search h2:after{
	font-family:"Material Design Icons";
	font-size: 150%;
	font-weight: normal;
	position: absolute;
	top: 50%;
	right: 0;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#term_search h2:not(.active):after{
	content: "\F140";
}
#term_search h2.active:after{
	content: "\F143";
}
#term_search dl{
	margin-top: 10px;
}
#term_search dl{
	display: none;
}
#term_search dl dt{
}
#term_search h3{
	background-color: #D80614;
	color: #FFFFFF;
	display: inline-block;
	font-weight: normal;
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 1px 0.5em;
}
#term_search dl dd a{
	background-color: #FFFFFF;
	border: 1px solid #E7626B;
	border-radius: 1000px;
	color: #E7626B;
	display: inline-block;
	font-size: 75%;
	line-height: 1.25;
	margin: 0.25em 0.5%;
	padding: 0.25em;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 31%;
	max-width: 300px;
}
#term_search dl dd a:before{
	content: "　";
	line-height: 2.5;
}
#term_search dl dd a:after{
	content: "\F35F";
	font-family: "Material Design Icons";
	font-size: 150%;
	position: absolute;
	top: 50%;
	right: 0;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#term_search dl dd a span{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
#term_search h2:hover{
	opacity: 0.7;
}
@media screen and (min-width:414px){
	#term_search dl dd a{
		font-size: 87.5%;
	}
}
@media screen and (min-width:640px){
	#term_search dl dd a{
		font-size: 100%;
	}
}
@media screen and (min-width:768px){
	#term_search{
		padding-top: 30px;
		padding-bottom: 30px;
	}
}


/* ==================================================================== */
/* カテゴリー
/* ==================================================================== */
/* -- Area Select -- */
#select_area{
	margin-bottom: 20px;
	text-align: center;
}
#select_area h2{
	color: #D80614;
	font-size: 87.5%;
	margin-bottom: 5px;
}
#select_area a{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-color: #D80614;
	border: 3px solid #D80614;
	border-radius :5px;
	color: #FFFFFF;
	display: inline-block;
	font-size: 75%;
	position: relative;
	text-decoration: none;
	transition: background-color 0.2s ease-out 0s;
	width: -webkit-calc((100% - (3.125% * 4)) / 3);
	width: calc((100% - (3.125% * 4)) / 3);
}
#select_area a:not(:first-child){
	margin-left: 3.125%;
}
#select_area a:hover,
#select_area a.active{
	background-color: #FFFFFF;
	color: #D80614;
}
#select_area a:after{
	content: "\F142";
	font-family:"Material Design Icons";
	font-size: 150%;
	font-weight: normal;
	position: absolute;
	top: 50%;
	right: -0.2em;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
@media screen and (min-width:360px){
	#select_area a{
		font-size: 87.5%;
	}
}
@media screen and (min-width:414px){
	#select_area a{
		font-size: 100%;
	}
}
@media screen and (min-width:768px){
	#select_area h2{
		margin-bottom: 10px;
	}
	#select_area a{
		width: 200px;
	}
	#select_area a:not(:first-child){
		margin-left: 20px;
	}
}

/* -- job list -- */
#job_title{
	overflow: hidden;
	text-align: center;
}
#job_title .title_section{
	display: inline-block;
}
#job_cnt{
	color: #FF5959;
	font-size: initial;
}
@media screen and (max-width:767px){
	#job_cnt{
		margin-top: 0.5em;
	}
	#job_cnt br{
		display: none;
	}
	#job_cnt span{
		margin-left: 0.5em;
	}
}
@media screen and (min-width:768px){
	#job_cnt{
		position: absolute;
		top: 50%;
		right: -3em;
		-ms-transform: translate(100%, -50%);
		-webkit-transform: translate(100%, -50%);
		transform: translate(100%, -50%);
		width: 6em;
	}
	#job_cnt:before,
	#job_cnt:after{
		height: 50px;
		width: 175px;
	}
	#job_cnt:before{
		right: -webkit-calc(50% + 6em);
		right: calc(50% + 6em);
	}
	#job_cnt:after{
		left: -webkit-calc(50% + 6em);
		left: calc(50% + 6em);
	}
}

/* -- 推し店舗ボタン -- */
#btn_fave{
	display: block;
	position: fixed;
	top: 56px;
	right: 0;
}
#btn_fave img{
	width: 100%;
}
@media screen and (max-width:939px){
	#btn_fave{
		z-index: 999;
	}
}
@media screen and (min-width:940px){
	#btn_fave{
		z-index: 1001;
	}
}
@media screen and (max-width:1279px){
	#btn_fave{
		width: 120px;
	}
}
@media screen and (min-width:1280px){
	#btn_fave{
		width: 160px;
	}
}
@media screen and (min-width:1921px){
	#btn_fave{
		width: 200px;
	}
}