@charset "utf-8";
/* CSS Document */
.txt-note {
	margin: 0 auto 2rem;
	max-width: 1120px;
	background: #FEF7F7;
	padding: 1.5em;
	font-weight: bold;
	display: flex;
	justify-content: center;
}
@media screen and (max-width: 1200px) {
.txt-note {
	max-width: 96%;
}
}
/* --------------------------------------------------
search-menu
-------------------------------------------------- */
.search-menu {
	border: 1px solid #FEEFF0;
	box-shadow: 2px 2px 4px #DFDFDF;
	border-radius: 5px;
	position: relative;
	margin-bottom: 6rem;
}
.search-detail {
  padding: 4rem 4rem 6rem;	
}
.search-menu dl {
	display: flex;
	align-items: baseline;
	border-bottom: 1px solid #FEEFF0;
	padding: 2rem 0;
}
.search-menu dl:first-of-type{
	padding: 0 0 2rem;
}
.search-menu dl:last-of-type{
	border-bottom: none;
	padding: 2rem 0 0;
}
.search-menu dl dt {
	font-weight: bold;
	width: 10%;
	min-width: 6em;
}
.search-menu dl dd {
	font-weight: bold;
	width: 90%;
}
.search-menu dl dd ul{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1rem -1rem 0;	
}
.search-menu dl dd ul li {
	margin: 0 1rem 1rem 0;
}
.search-menu dl dd ul li span {
	padding: .7em 1.5em;
	border: 1px solid #DDDDD0;
	display: block;
	border-radius: 3rem;
	cursor: pointer;
	transition-duration: 0.3s;	
}
.search-menu dl dd ul li span.select,
.search-menu dl dd ul li span:hover {
	background: #F75F6F;
	color: #fff;
	border: 1px solid #F75F6F;	
}
.search-menu input[type="text"] {
	width: 100%;
	border-radius: 5px;
	border: 1px solid #DDDDD0;
	background: none;
}
.search-menu button{
	width: 300px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 1em;
	border-radius: 3.0rem;
	display: block;
	font-weight: bold;
	font-size: 1.8rem;
	margin: 0 1rem;
}
.btn-search-menu {
	position: inherit;
	text-align: center;
}
.btn-search-menu.open {
	position: absolute;
	bottom: -2em;
	left: 50%;
	margin-left: -120px;
	text-align: center;	
}
.btn-search-menu li span{
	color: #F75F6F;
	border: 1px solid #F75F6F;
	display: inline-block;
	padding: .5em 1em;
	background: #fff;
	border-radius: 5px;
	width: 100%;	
	cursor: pointer;
	font-size: 1.8rem;
}
.btn-search-menu.open li span{
	width: 240px;	
}
.btn-search-menu li span:hover{
	background: #F75F6F;
	color: #fff;
}
.btn-search-menu li span:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 1rem;
	
}
.btn-search-menu li:nth-child(1) span:before{
	content: "\f068";	
}
.btn-search-menu li:nth-child(2) span:before{
	content: "\f067";	
}
.btn-search-menu li:nth-child(2){
	display: block;
}
.btn-search-menu li:nth-child(1){
	display: none;
}
.btn-search-menu.open li:nth-child(1){
	display: block;
}
.btn-search-menu.open li:nth-child(2){
	display: none;
}
.sort-menu {
	display: flex;
	justify-content: center;
}
.sort-menu dd ul{
	display: flex;
}
.sort-menu dd li {
	padding: 0 1rem;
}

.sort-menu dd li span{
	display: block;
	cursor: pointer;
	position: relative;
	padding-bottom: 0.2em;	
}
.sort-menu dd li span::after {
  background: rgba(247,95,111,0.7);
  bottom: 0;
  content: '';
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transition: .5s all;
  width: 0;
}
.sort-menu dd li  span:hover::after {
  width: 100%;
}
/*.sort-menu dd li span:hover {
	border-bottom: 1px solid;
}
*/

.sort-menu dd li span:before {
	content: "\f192";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: .5rem;
	display: inline-block;	
}
.sort-menu dd li span.select:before {
	color: #F75F6F;
}

/* inner */
#contents .inner.animal-list {
	max-width: 100%;
	justify-content: center;
	padding: 0;
}
/*.animal-list #main {
	width: 100%;
}*/
.animal-list .search-menu {
	max-width: 1120px;
	margin: 0 auto 6rem;
}
.paging-wrap {
	max-width: 1120px;
	margin: 0 auto;
}
.animal-list .list-wrap {
	width: 100%;
	background: #FEEFF0;
	padding: 4rem 0;
	margin: 1rem 0 2rem;
	display: flex;
	justify-content: center;		
}
.animal-list .list {
	width: 1140px;
}
.search-detail input[type="checkbox"] + label, 
.search-detail input[type="radio"] + label {
    margin-right: 0;
}

@media screen and (max-width: 1200px) {
.animal-list .search-menu,
.paging-wrap {
	max-width: 96%;
}
.animal-list .list {
	width: 96%;
}	
.search-detail {
	padding: 4% 4% 6%;
}	
.search-menu dl {
	display: block;
}
.search-menu dl dt {
	width: auto;
	min-width: auto;
	margin-bottom: 1rem;
}

}

/* for TABLET */
@media screen and (max-width: 800px) {	
#contents .inner.animal-list {
	width: 100%;
}
.animal-list .list-wrap {
	padding: 4% 0;
	margin: 1rem 0 2rem;
}
.animal-list .search-menu {
	margin: 0 auto 4rem;
}	
.search-menu button{
	width: 100%;
}
.btn-area p {
	width: 48%;
}	
}

/* for smartPhone */
@media screen and (max-width: 600px) {
.search-menu button	{
	width: 100%;
}
.search-menu button{
	margin: 0;
}
.btn-area p	{
	width: 100%;	
}
}

/* --------------------------------------------------
detail
-------------------------------------------------- */
.register-date {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;	
	margin-bottom: 1rem;
}
.register-date p {
	margin: 0 0 0.5rem 2rem;
}
.animal-detail {
	width: 100%;
	display: flex;
	flex-wrap: wrap;	
}
.animal-detail dt {
	background: #FEF7F7;
	border-bottom: 1px solid #FCD1D5;
	width: 30%;
  padding: 1em;
	text-align: center;
}
.animal-detail dd {
	border-bottom: 1px solid #FCD1D5;
	width: 70%;
  padding: 1em;	
}
.animal-detail .play-control {
	margin: 0.5rem 0;
	text-align: right;
}
.btn-block {
	margin: 4rem 0 6rem;
}
.btn.btn-more {
	width: 600px;
}

.recommend-area {
	background: #FEEFF0;
	padding: 4rem 4rem 2rem;
}
/* for TABLET */
@media screen and (max-width: 800px) {
.animal-detail {
	width: 100%;
  display: block;
}
	.animal-detail dt,
	.animal-detail dd{
		width: 100%;
	}
	.animal-detail dt {
    border-bottom: none;
	}
	.btn-block {
    margin: 4% 0 6%;
}
	.recommend-area {
    padding: 4%;
}
}