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

/*===================================================
	詳細ページ用CSS
===================================================*/
header .headBox,
.topicPath {
	max-width: 1644px;
}
/* --------------------------------------------------
	main
-------------------------------------------------- */
#detailMain {
	padding: 20px;
	font-family: 'rounded-mplus';
	font-weight: 300;
}
	#detailMain .detailWrap {
		max-width: 660px;
		margin: 0 auto;
	}
/* --------------------------------------------------
	店舗メイン
-------------------------------------------------- */
#detailMain .shopDetail {
	float: none;
	width: 100%;
	max-width: 660px;
	margin: 20px auto 0;
}
#detailMain .shopDetail > div {
	padding: 20px;
	text-align: left;
	border-radius: 4px;
	background: #FFFFFF;
	box-shadow:0px 2px 6px 1px rgba(0,0,0,0.1);
	-moz-box-shadow:0px 2px 6px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow:0px 2px 6px 1px rgba(0,0,0,0.1);
}

#detailMain .shopDetail > .newArrivals {
	position: relative;
}
#detailMain .shopDetail > .newArrivals:before {
	content: '';
	position: absolute;
	top: -6px;
	left: -6px;
	width: 100px;
	height: 100px;
	z-index: 5;
	background: url("../../common/img/1x/img_band.png") left center no-repeat;
	background-size: 100px auto;
}


	/* 写真表示部分 */
	#detailMain .shopDetail .infoShop .photoWrapper {
		position: relative;
		padding-top: calc(50% / 3 * 2);
		padding-bottom: calc(50% / 3 * 2);
	}
		#detailMain .shopDetail .infoShop #photoView{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			max-width: 618px;
			max-height: 412px;
			margin: auto;
		}
			#detailMain .shopDetail .infoShop #photoView #flipPhoto{
				width: 1000%;
				height: 100%;
			}
			#detailMain .shopDetail .infoShop #photoView #flipPhoto:after {
				content: '';
				display: block;
				clear: both;
				height: 0;
			}
				#detailMain .shopDetail .infoShop #photoView #flipPhoto .flipItem{
					float: left;
					position: relative;
					width: 10%;
					height: 100%;
				}
					#detailMain .shopDetail .infoShop #photoView #flipPhoto .flipItem img {
						position: absolute;
						height: auto;
						width: auto;
						max-height: 100%;
						max-width: 100%;
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						margin: auto;
					}

		/* 写真セレクター */
		#detailMain .shopDetail .infoShop .photoSelector{
			clear: both;
			display: table;
			table-layout: fixed;
			margin: 10px auto 0;
			width: 200px;
			text-align: center;
		}
			#detailMain .shopDetail .infoShop .photoSelector div{
				display: table-cell;
				vertical-align: middle;
				height: 24px;
				cursor: pointer;
			}
			#detailMain .shopDetail .infoShop .photoSelector .selectorLeft{
				background: url("../../common/img/1x/icon_arrow_left.png") center center no-repeat;
				width: 24px;
			}
			#detailMain .shopDetail .infoShop .photoSelector .selectorRight{
				background: url("../../common/img/1x/icon_arrow_right.png") center center no-repeat;
				width: 24px;
			}
			#detailMain .shopDetail .infoShop .photoSelector .selector{
				background: url("../../common/img/1x/icon_dot_grey.png") center center no-repeat;
			}
			#detailMain .shopDetail .infoShop .photoSelector .active{
				background: url("../../common/img/1x/icon_dot_green.png") center center no-repeat;
			}


#detailMain .shopDetail .infoMiddle p {
	width: 320px;
	margin: 0 auto 10px;
	text-align: center;
	border-radius: 4px;
}
#detailMain .shopDetail .infoMiddle p:active {
	border-top:2px solid #FFFAEE;
	border-bottom: none;
}
#detailMain .shopDetail .infoMiddle .btnApply {
	height: 55px;
	font-size: 11px;
	color: #FFFFFF;
	border-radius: 4px;
	border-bottom: 5px solid #DD8604;
	background: #FF9900;
}
	#detailMain .shopDetail .infoMiddle .btnApply a {
		display: block;
		padding: 0.3em 0;
	}
	#detailMain .shopDetail .infoMiddle em {
		display: block;
		font-size: 16px;
		font-weight: 700;
	}

/* ペットショップへ電話をかけるボタン */
#detailMain .shopDetail .infoMiddle .btnTel {
	height: 55px;
	line-height: 50px;
	font-size: 16px;
	color: #FFFFFF;
	border-bottom: 5px solid #DD8604;
	background: #FF9900;
	cursor: pointer;
}
	#detailMain .shopDetail .infoMiddle .btnTel em::before {
		display: inline-block;
		content: '';
		width: 20px;
		height: 1em;
		background: url("../img/detail/2x/icon_tel.png") center center no-repeat #FF9900;
		background-size: 10px auto;
	}

/* メールでお問い合わせボタン */
#detailMain .shopDetail .infoMiddle .btnMail {
	height: 50px;
	line-height: 46px;
	font-size: 16px;
	color: #F6A62B;
	border-bottom: 4px solid #F7D8A0;
	background: #FFE7BC;
	cursor: pointer;
}
	#detailMain .shopDetail .infoMiddle .btnMail em::before {
		display: inline-block;
		content: '';
		margin-right: 5px;
		margin-bottom: -3px;
		width: 24px;
		height: 18px;
		background: url("../../common/img/1x/icon_mail.png") center center no-repeat;
		background-size: 24px auto;
	}

/* ペットショップのホームページへボタン */
#detailMain .shopDetail .infoMiddle .btnShop {
	height: 50px;
	line-height: 46px;
	font-size: 18px;
	color: #7799AA;
	border-bottom: 4px solid #C7DDE9;
	background: #D9EDF5;
}
	#detailMain .shopDetail .infoMiddle .btnShop em::after {
		display: inline-block;
		content: '';
		width: 10px;
		height: 8px;
		margin-left: 5px;
		background: url("../../common/img/1x/icon_link.png") center center no-repeat;
		background-size: 10px auto;
	}

/* 電話ボタン（販売店情報） */
#detailMain .shopDetail #tel a {
	clear: both;
	display: block;
	width: 150px;
	height: 35px;
	padding-left: 15px;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
	color: #FFFFFF;
	border-radius: 4px;
	border-bottom: 4px solid #DD8604;
	background: url("../img/detail/2x/icon_tel.png") 15px 11px no-repeat #FF9900;
	background-size: 10px auto;
	line-height: 35px;
}
/*
	#detailMain .shopDetail #tel a:active {
		margin: 4px auto 0 10px;
		height: 21px;
		border-bottom: none;
	}
*/
	#detailMain .shopDetail h1 {
		margin-bottom: 20px;
		padding-left: 50px;
		font-size: 18px;
		font-weight: 500;
		padding: 20px 0 20px 50px;
		border-radius: 4px;
	}
	/* ペットショップ詳細 */
	#detailMain .shopDetail .infoShop {
		clear: both;
	}
	#detailMain .shopDetail .infoShop h1 {
		background: url("../img/detail/1x/detail_icon_store.png") 15px center no-repeat #F5F5F5;
		background-size: 30px auto;
	}

		/* お店のキャッチコピー */
		#detailMain .shopDetail .infoShop .catchPhrase {
			margin: 15px 0;
			width: 100%;
			height: 100%;
			text-align: left;
			font-size: 13px;
			line-height: 22px;
			word-break: break-word;
			-ms-word-wrap: break-word;
			padding: 10px;
			font-weight: 100;
			border: solid 2px #ECD677;
			border-radius: 5px;
			background-color: #FFFDF3;
		}
	/* 店舗詳細用ボタン */
	#detailMain .shopDetail .petShopBtnBox {
		background-color: #F6F6F6;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		/*justify-content: space-around;*/
		-webkit-align-items: center;
		align-items: center;
		margin: 20px 0;
		padding: 20px 10px;
	}
		#detailMain .shopDetail .petShopBtnBox a {
			background-color: #90C31F;
			border-bottom: 4px solid #89AF33;
			border-radius: 4px;
			font-size: 16px;
			font-weight: 500;
			color: #FFFFFF;
			width: 210px;
			height: 44px;
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-align-items: center;
			align-items: center;
			margin: 0 20px;
		}
		#detailMain .shopDetail .petShopBtnBox a:before {
			display: inline-block;
			content: '';
			margin-right: 5px;
			background-size: 10px auto;
		}
		#detailMain .shopDetail .petShopBtnBox a:active {
			border-bottom: none;
			margin-top: 4px;
			height: 40px;
		}
		#detailMain .shopDetail .petShopBtnBox a:nth-child(1)::before {
			background: url("../../common/img/1x/icon_pad.png") center center no-repeat;
			width: 16px;
			height: 16px;
		}
		#detailMain .shopDetail .petShopBtnBox a:nth-child(2)::before {
			background: url("../../common/img/1x/icon_map.png") center center no-repeat;
			width: 16px;
			height: 16px;
		}

		#detailMain .shopDetail .infoTable {
			margin: 20px 0;
			width: 100%;
			font-size: 14px;
			border-top: 1px solid #EDEDED;
		}
			#detailMain .shopDetail .infoTable tr {
				border-bottom: 1px solid #EDEDED;
			}
			#detailMain .shopDetail .infoTable th {
				width: 25%;
				max-width: 80px;
				padding: 5px 5px 5px 10px;
				background: #F5F5F5;
			}
			#detailMain .shopDetail .infoTable td {
				width: 75%;
				padding: 5px 10px;
				font-weight: 300;
			}

	#detailMain .shopDetail .infoMiddle {
		clear: both;
		background-color: #FFFAEE;
		border: solid 2px #FFEEC0;
		border-radius: 5px;
		padding: 25px 10px;
	}
		#detailMain .shopDetail .infoMiddle p:last-child {
			margin-bottom: 0;
		}

/* ペットショップ詳細
-------------------------------------------------- */
#detailMain .infoShop .infoTable th {
	width: 15%;
}
#detailMain .infoShop .infoTable td {
	width: 85%;
}
	#detailMain .infoTable td a {
		color: #007440;
	}
	#detailMain .infoShop .infoTable td#tel {
		padding: 10px 10px;
	}
	/* 地図を見る */
	#detailMain .infoShop .infoTable td span {
		display: block;
		width: 100px;
		padding: 2px 0 2px 10px;
		font-size: 12px;
		font-weight: 500;
		border-radius: 4px;
		background: url("../../common/img/1x/icon_target.png") 80px center no-repeat #90C31F;
		background-size: 10px auto;
	}
		#detailMain .infoShop .infoTable td span a {
			display: block;
			color: #FFFFFF;
		}

/* 一覧へ戻るボタン
-------------------------------------------------- */
#detailMain .btnBox {
	clear: both;
	max-width: 660px;
	margin: 0 auto;
}
#detailMain .btnBack {
	width: 200px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 4px;
	border-bottom: 4px solid #D1D0CB;
	background: #E8E7E3;
	margin-top: 30px;
}
#detailMain .btnBack:active {
	border-top: 2px solid #FFFFFF;
	border-bottom: none;
}
	#detailMain .btnBack a {
		display: block;
	}
/* --------------------------------------------------
	このペットショップのワンちゃん・ネコちゃん
-------------------------------------------------- */
#detailMain .gallery {
	margin-top: 60px;
}
	#detailMain .gallery .ttl {
		position: relative;
		display: inline-block;
		margin-bottom: 20px;
		font-size: 18px;
		font-weight: 500;
	}
		#detailMain .gallery .ttl br {
			display: none;
		}
	#detailMain .gallery .ttl:before {
		content: '';
		position: absolute;
		left: -50px;
		top: 0;
		width: 42px;
		height: 30px;
		background: url("../img/detail/1x/icon_flag_left.gif") no-repeat;
		background-size: 42px auto;
	}
	#detailMain .gallery .ttl:after {
		content: '';
		position: absolute;
		right: -50px;
		top: 0;
		width: 42px;
		height: 30px;
		background: url("../img/detail/1x/icon_flag_right.gif") no-repeat;
		background-size: 42px auto;
	}

/* 生体パネル */
.result > ul > li {
	height: 430px;
	background-position: 260px 370px;
}

/*===================================================
	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){

	/* 新着の帯 */
	#detailMain .shopDetail > .newArrivals:before {
		background: url("../../common/img/2x/img_band.png") left center no-repeat;
		background-size: 100px auto;
	}

	/* この子の詳細情報 */
	#detailMain .shopDetail .infoPet h2 {
		background: url("../img/detail/2x/detail_icon_paw.png") 15px center no-repeat #F5F5F5;
		background-size: 30px auto;
	}

	/* ペットショップ詳細 */
	#detailMain .shopDetail .infoShop h1 {
		background: url("../img/detail/2x/detail_icon_store.png") 15px center no-repeat #F5F5F5;
		background-size: 30px auto;
	}

	/* 生体写真切り替えボタン */
	#detailMain .shopDetail .infoShop .photoSelector .selectorLeft{
		background: url("../../common/img/2x/icon_arrow_left.png") center center no-repeat;
		background-size: 24px auto;
	}
	#detailMain .shopDetail .infoShop .photoSelector .selectorRight{
		background: url("../../common/img/2x/icon_arrow_right.png") center center no-repeat;
		background-size: 24px auto;
	}
	#detailMain .shopDetail .infoShop .photoSelector .selector{
		background: url("../../common/img/2x/icon_dot_grey.png") center center no-repeat;
		background-size: 10px auto;
	}
	#detailMain .shopDetail .infoShop .photoSelector .active{
		background: url("../../common/img/2x/icon_dot_green.png") center center no-repeat;
		background-size: 10px auto;
	}

	/* メールでお問い合わせボタン */
	#detailMain .shopDetail .infoMiddle .btnMail em::before {
		background: url("../../common/img/2x/icon_mail.png") center center no-repeat;
		background-size: 24px auto;
	}
	/* ペットショップのホームページへボタン */
	#detailMain .shopDetail .infoMiddle .btnShop em::after {
		background: url("../../common/img/2x/icon_link.png") center center no-repeat;
		background-size: 10px auto;
	}

	#detailMain .shopDetail .petShopBtnBox a:nth-child(1)::before {
		background: url("../../common/img/2x/icon_pad.png") center center no-repeat;
		background-size: 16px auto;
	}
	#detailMain .shopDetail .petShopBtnBox a:nth-child(2)::before {
		background: url("../../common/img/2x/icon_map.png") center center no-repeat;
		background-size: 16px auto;
	}

	/* マスキングテープ */
	#detailMain .shopDetail .infoLeft p:before {
			background: url("../img/detail/2x/detail_icon_masking.png") no-repeat;
			background-size: 46px auto;
		}
		#detailMain .shopDetail .infoLeft p:after {
			background: url("../img/detail/2x/detail_icon_masking.png") no-repeat;
			background-size: 46px auto;
		}
	/* ストライプ */
	#detailMain .shopDetail .present {
		background: url("../img/detail/2x/bg_stripe.png");
		background-size: 15px auto;
	}
		/* プレゼント画像 */
		#detailMain .shopDetail .present p,
		#detailMain .shopDetail .present p {
			background: url("../img/detail/2x/icon_present.png") 98% 80% no-repeat;
			background-size: 80px auto;
		}

	/* アイコン（足） */
	#detailMain .shopDetail .infoRight dl dd + dd {
		background: url("../../common/img/2x/icon_paw.png") left center no-repeat;
		background-size: 11px auto;
	}
	/* アイコン（ハート） */
	#detailMain .shopDetail .infoRight dl dd + dd + dd {
		background: url("../../common/img/2x/icon_heart.png") left center no-repeat;
		background-size: 13px auto;
	}
	/* アイコン（吹き出し） */
	#detailMain .shopProfile h3:before {
		background: url("../../common/img/2x/icon_voice.png") no-repeat;
		background-size: 18px auto;
	}
	/* 地図を見る */
	#detailMain .infoShop .infoTable td span {
		background: url("../../common/img/2x/icon_target.png") 80px center no-repeat #90C31F;
		background-size: 10px auto;
	}

	/* 写真一覧タイトル */
	#detailMain .gallery .ttl:before {
		background: url("../img/detail/2x/icon_flag_left.gif") no-repeat;
		background-size: 42px auto;
	}
	#detailMain .gallery .ttl:after {

		background: url("../img/detail/2x/icon_flag_right.gif") no-repeat;
		background-size: 42px auto;
	}

}