/*============================
MV
============================*/
#mv {
	background-image: url(../img/mv01.jpg);
}

/*============================
一覧ページ
============================*/
#sento_list_wrap {
	padding-bottom: 1.00rem;
}

/* 検索パネル */
.sento_search_tab_wrap {
	max-width: 10.80rem;
	margin: auto;
}

@media screen and (max-width: 599px) {
	.sento_search_tab_wrap {
		margin: 0 0.10rem;
	}
}

.sento_search_tab_wrap .sento_search_tab_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	z-index: 0;
}

.sento_search_tab_wrap .sento_search_tab_list .sento_search_tab {
	width: 32%;
	cursor: pointer;
	font-size: 0.22rem;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 500;
	line-height: 0;
	padding: 0.29rem 0 0.31rem;
	text-align: center;
	border-top-left-radius: 0.06rem;
	border-top-right-radius: 0.06rem;
	color: #FFF;
	position: relative;
	top: 0.06rem;
	transition: all 0.3s;
}

@media screen and (max-width: 599px) {
	.sento_search_tab_wrap .sento_search_tab_list .sento_search_tab {
		width: 33%;
		font-size: 0.16rem;
		line-height: 1.2;
		padding: 0.10rem 0 0.12rem;
	}

	.sento_search_tab_wrap .sento_search_tab_list .sento_search_tab span {
		display: block;
		font-size: 0.13rem;
	}

	.sento_search_tab_wrap .sento_search_tab_list .sento_search_tab::after {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 6px 0 6px;
		border-color: rgba(255, 255, 255, 0.3) transparent transparent transparent;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

.sento_search_tab_wrap .sento_search_tab_list .sento_search_tab.active {
	top: 0;
}

/* タブの色 */
.sento_search_tab_wrap .sento_search_tab_list .sento_search_tab.area {
	background-color: #F15A24;
}

.sento_search_tab_wrap .sento_search_tab_list .sento_search_tab.word {
	background-color: #00A99D;
}

.sento_search_tab_wrap .sento_search_tab_list .sento_search_tab.facilities {
	background-color: #0071BC;
}

/* 選択ボックス */
.sento_search_gategory {
	background-color: #F2F2F2;
	padding: 0.30rem 0.40rem;
	border-radius: 0.06rem;
	display: none;
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 599px) {
.sento_search_gategory {
	padding: 0.15rem;
}
}

.sento_search_gategory.active {
	display: block;
}

/* ボックスの枠の色 */
.sento_search_gategory.area {
	border: 4px solid #F15A24;
}

.sento_search_gategory.word {
	border: 4px solid #00A99D;
}

.sento_search_gategory.facilities {
	border: 4px solid #0071BC;
}

.sento_search_gategory .search_list {
	display: flex;
	flex-wrap: wrap;
}

.sento_search_gategory .search_list .search_detail {
	font-size: 0.17rem;
	letter-spacing: 0.075em;
	margin: 0.05rem 0;
	width: 14.28%;
	box-sizing: border-box;
	padding: 0.10rem 0.10rem 0.12rem;
	border-radius: 0.40rem;
	cursor: pointer;
	transition: all 0.3s;
	background-color: #F2F2F2;
}

@media screen and (max-width: 599px) {
.sento_search_gategory .search_list .search_detail {
	font-size: 0.14rem;
	letter-spacing: 0.075em;
	margin: 0.02rem 0;
	width: 50%;
	box-sizing: border-box;
	padding: 0.06rem 0.06rem 0.08rem;
	border-radius: 0.40rem;
	cursor: pointer;
	transition: all 0.3s;
	background-color: #F2F2F2;
}
}

.sento_search_gategory .search_list .search_detail span {
	font-size: 0.15rem;
}

@media screen and (max-width: 599px) {
.sento_search_gategory .search_list .search_detail span {
	font-size: 0.12rem;
}
}

.sento_search_gategory .search_list .search_detail:hover {
	background-color: #DDD;
}

.sento_search_gategory .search_list .search_detail.select {
	background-color: #CCC;
	font-weight: 700;
}

/* 絞り込み解除 */
.clear_btn {
	width: 100%;
	max-width: 4.00rem;
	margin: 0.30rem auto;
	display: none;
}

@media screen and (max-width: 599px) {
.clear_btn {
	margin: 0.20rem auto;
	max-width: 3.00rem;
}
}

#sento_search_wrap.active .clear_btn {
	display: block;
}

.clear_btn span {
	display: block;
	line-height: 0;
	font-size: 0.20rem;
	font-weight: 700;
	text-align: center;
	padding: 0.28rem 0 0.30rem;
	cursor: default;
	background-color: #999;
	border-radius: 0.06rem;
	color: #CCC;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	transition: all 0.3s;
}

@media screen and (max-width: 599px) {
.clear_btn span {
	font-size: 0.16rem;
	padding: 0.24rem 0 0.26rem;
}
}

#sento_search_wrap.active .clear_btn span {
	cursor: pointer;
	background-color: #FF931E;
	color: #FFF;
	box-shadow: 0 3px 0 rgba(255, 147, 30, 0.3);
}

/* 絞り込み時のタイトル */
#search_results_title span {
	display: block;
	text-align: center;
	padding: 0.20rem 0;
	font-size: 0.30rem;
	font-weight: 700;
	letter-spacing: 0.10em;
}

@media screen and (max-width: 599px) {
#search_results_title span {
	padding: 0.30rem 0;
	font-size: 0.20rem;
}
}

/* 一覧 */
#sento_list_wrap .list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.30rem;
	padding-top: 0.40rem;
}

@media screen and (max-width: 599px) {
#sento_list_wrap .list {
	margin: 0 -0.10rem;
	padding-top: 0.30rem;
}
}

#sento_list_wrap .list .detail {
	width: 33.3%;
	box-sizing: border-box;
	padding: 0 0.30rem 0.60rem;
	text-align: center;
}

@media screen and (max-width: 599px) {
#sento_list_wrap .list .detail {
	width: 50%;
	padding: 0 0.10rem 0.30rem;
}
}

#sento_list_wrap .list .detail a {
	text-decoration: none;
	color: #111;
	display: block;
}

/* 写真 */
#sento_list_wrap .list .detail a .ph_wrap {
	width: 100%;
	height: 2.30rem;
	overflow: hidden;
	position: relative;
	z-index: 1;
	border-radius: 0.10rem;
	margin-bottom: 0.15rem;
	box-sizing: border-box;
	border: 1px solid #DDD;
}

@media screen and (max-width: 599px) {
#sento_list_wrap .list .detail a .ph_wrap {
	height:30vw;
	border-radius: 0.06rem;
	margin-bottom: 0.10rem;
}
}

#sento_list_wrap .list .detail a .ph_wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 0;
	transition: all 0.3s;
}

#sento_list_wrap .list .detail a:hover .ph_wrap img {
	transform: scale(1.04);
	opacity: 0.5;
}

/* 所属エリア */
#sento_list_wrap .list .detail a .category {
	display: inline-block;
	border: 1px solid #111;
	padding: 0.04rem 0.10rem 0.07rem;
	border-radius: 0.20rem;
	font-size: 0.12rem;
	letter-spacing: 0.10em;
	margin-bottom: 0.10rem;
}

@media screen and (max-width: 599px) {
#sento_list_wrap .list .detail a .category {
	padding: 0.03rem 0.10rem 0.05rem;
	font-size: 0.11rem;
}
}

/* 店名 */
#sento_list_wrap .list .detail a .sento_name {
	font-size: 0.20rem;
	letter-spacing: 0.075em;
	padding-bottom: 0.08rem;
	font-weight: 700;
}

@media screen and (max-width: 599px) {
	#sento_list_wrap .list .detail a .sento_name {
		font-size: 0.16rem;
	}
}

/* ふりがな */
#sento_list_wrap .list .detail a .shop_kana {
	font-size: 0.13rem;
	padding-bottom: 0.10rem;
}

/* 住所 */
#sento_list_wrap .list .detail a .address {
	font-size: 0.14rem;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

@media screen and (max-width: 599px) {
#sento_list_wrap .list .detail a .address {
	font-size: 0.13rem;
}
}

/* タグ */
#sento_list_wrap .list .detail a .tag_list {
	padding-top: 0.10rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media screen and (max-width: 599px) {
#sento_list_wrap .list .detail a .tag_list {
	padding-top: 0.05rem;
}
}

#sento_list_wrap .list .detail a .tag_list .tag {
	padding: 0 0.05rem;
	font-size: 0.13rem;
	color: #999;
}

@media screen and (max-width: 599px) {
#sento_list_wrap .list .detail a .tag_list .tag {
	font-size: 0.12rem;
	line-height: 1.45;
}
}

#sento_list_wrap .list .detail a .tag_list .tag::before {
	content: "#";
	display: inline-block;
	padding-right: 0.02rem;
}
