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

/*===================================================
	トップページ用CSS
===================================================*/
/* --------------------------------------------------
	header
-------------------------------------------------- */
header .headMain {
	padding: 35px 30px 30px;
}
	header .headMain .headWrap {
		max-width: 1200px;
		margin: 0 auto;
	}
	header .headMain .headLeft {
		float: left;
		max-width: 500px;
		width: 50%;
	}
	header .headMain h1 {
		max-width: 500px;
		margin-bottom: 10px;
	}
	header .headMain h1 + p {
		/* margin: 0 auto 45px; */
				margin: 0 auto 10px;
		min-width: 350px;
		font-family: 'rounded-mplus';
		font-weight: 700;
		font-size: 14px;
		color: #555967;
		text-align: center;
		letter-spacing: 0.1;
		text-shadow: 0 1px 1px rgba(255, 255, 255, 1),
			0 -1px 1px rgba(255, 255, 255, 1),
			1px 0 1px rgba(255, 255, 255, 1),
			-1px 0 1px rgba(255, 255, 255, 1);
	}

/*  雲
-------------------------------------------------- */
header {
	background: none;
	background-color: #FFFFFF;
	position: relative;
	overflow: hidden;
}
header #cloud {
	min-height: 460px;
	position: relative;
	z-index: 1;
	background: url("../../common/img/1x/bg_index.png") no-repeat;
	background-size: auto 597px;
	background-position: center;
	background-position-x: 50%;
	/* background-position-y: calc(-40px + 80%); */
	/* background-position-x: 60%;*/
}
@media only screen and (min-width: 1500px){
	header #cloud {
		background: url("../../common/img/1x/bg_index.png") no-repeat;
		background-position: center;
		background-size: auto 597px;
	}
	header .headMain h1 + p{
		margin: 0 auto 10px;
	}
}
/*@-webkit-keyframes cloud_anime {from {background-position: 0 10px;} to {background-position: 1078px 10px;}}
@keyframes cloud_anime {from {background-position: 0 10px;} to {background-position: 1078px 10px;}}*/

/*@-webkit-keyframes cloud_anime {from { -webkit-transform: translateX(-1078px);} to { -webkit-transform: translateX(0);}}
@keyframes cloud_anime {from { transform: translateX(-1078px);} to { transform: translateX(0);}}*/

/* ヘッダー下部の影 */
header > *:last-child{
	margin-bottom: 5px;
	box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.1);
}

/*  検索ボックス
-------------------------------------------------- */
header .searchBox {
	width: 100%;
	max-width: 500px;
	min-width: 360px;
	padding: 20px 15px;
}
	/* 吹き出し */
	header .searchBox .balloon {
		position: absolute;
		top: -50px;
		right: -55px;
		width: 120px;
		height: 66px;
		font-family: 'rounded-mplus';
		font-weight: 700;
		font-size: 13px;
		color: #FFFFFF;
		line-height: 64px;
		text-align: center;
		z-index: 1;
		background: url("../img/index/1x/img_balloon.png") no-repeat;
		background-size: 120px auto;
	}
	header .searchBox dl {
		margin-bottom: 10px;
	}
		/* チェックボックス */
		header .searchBox dl .checkBox {
			height: 30px;
			line-height: 30px;
		}
		header .searchBox dl .radioBox ul {
			max-width: 330px;
		}
		header .searchBox dl > dt {
			min-width: 100px;
			padding-left: 10px;
			text-align: left;
		}
	header .searchBox dl + dl {
		margin: 10px 0;
	}
	header .searchBox>div dl:last-of-type{
		margin-bottom: 0;
	}

	/* 検索ボタン関連 */
	header .searchBox > .btnArea {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: flex-end;
		align-items: flex-end;
		margin: 20px auto 0;
		width: 290px;
	}
		/* 探すボタン */
		header #btnSearch {
			width: 240px;
		}

		header #btnPetShopSearch {
			margin-left: 20px;
		}

			header #btnPetShopSearch a {
				display: block;
				font-size: 12px;
				color: #FFFFFF;
				text-align: center;
				line-height: 24px;
				position: relative;
				width: 70px;
				/* height: 30px; */
				background-color: #5CB0E3;
				border: none;
				border-bottom: solid 4px #529AC6;
				border-radius: 4px;
				cursor: pointer;
			}

			header #btnPetShopSearch a:active {
				border-top: 2px solid #FFFFFF;
				border-bottom: none;
			}

			header .searchBox dl .radioBox ul li{
				height: 25px;
			}

			header .searchBox dl .radioBox ul li label{
				height: 26px;
				line-height: 26px;
			}
			header .searchBox dl dd{
				vertical-align: middle;
			}
			.modalSelect .modalOpen input{
				padding: 4px 0;
			}

			/*詳細条件*/
			/* header .btnAccrd{
				width:240px;
				height: 40px;
				background: #E8E7E3;
				border-radius: 4px;
				border-bottom: 4px solid #D1D0CB;
				text-align: center;
				cursor: pointer;
				line-height: 3.0;
				font-family: 'rounded-mplus';
				font-weight: 500;
				margin: 10px auto;
			} */
			header .searchBox > #btnSearchCondAccrd{
				width:240px;
				height: 40px;
				background: #E8E7E3;
				border-radius: 4px;
				border-bottom: 4px solid #D1D0CB;
				text-align: center;
				cursor: pointer;
				line-height: 3.0;
				font-family: 'rounded-mplus';
				font-weight: 500;
				margin: 10px auto;
			}
				header .searchBox > #btnSearchCondAccrd:active {
					border-top: 2px solid #FFFFFF;
					border-bottom: none;
				}
			header #btnSearch input,header #btnReset input{
				/* width:200px; */
				width: 100%;
			}
			/*価格*/
			header .searchBox dl .selectBox > div{
				width: 40%;
				height:26px;
				line-height: 26px;
			}
			.selectBox > div label{
				width: 100%;
				height: 26px;
			}
			header .searchBox dl .selectBox > div + span{
				width:30px;
			}

/* 鳥
-------------------------------------------------- */
header #bird {
	display: none;
	/*
	position: relative;
	top: 10px;
	float: right;
	width: 45%;
	max-width: 500px;
	*/
}
	header #bird p {
		position: absolute;
		right: 0;
		-webkit-animation: bird_anime 2s linear infinite alternate;
		animation: bird_anime 2s linear infinite alternate;
	}
/*    @-webkit-keyframes bird_anime {from { -webkit-transform: translateY(0);} to { -webkit-transform: translateY(30px);}}
	@keyframes bird_anime {from { transform: translateY(0);} to { transform: translateY(30px);}}*/
/* 新着はこちら */
#btnNew {
	display: none;
}
#listCount.active {
	pointer-events: auto;
	opacity: 1;
}

/* --------------------------------------------------
	main
-------------------------------------------------- */
.searchCnt {
	padding: 40px 20px 120px;
}
footer .footWrap {
	max-width: 1600px;
}
/*===================================================
	Retina対応
===================================================*/

@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi),only screen and ( min-resolution: 2dppx){

	/* 雲 */
	header #cloud_bg {
		background: url("../img/index/2x/header_cloud.png") left center repeat-x;
		background-size: auto 460px;
	}

	/* 吹き出し */
	header .searchBox .balloon {
		background: url("../img/index/2x/img_balloon.png") no-repeat;
		background-size: 120px auto;
	}

	/* 探すボタン */
	header #btnSearch span {
		background: url("../../common/img/2x/icon_search.png") left center no-repeat;
		background-size: 20px auto;
	}

	/* 新着の帯 */
	.searchCnt .result > ul > li a:before {
		background: url("../../common/img/2x/img_band.png") left center no-repeat;
		background-size: 100px auto;
	}

	/* 更新の帯 */
	.searchCnt .result > ul > li a:before {
		background: url("../../common/img/2x/img_renew_band.png") left center no-repeat;
		background-size: 100px auto;
	}
}