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

/*===================================================
	詳細ページ用CSS(スマホ)
===================================================*/
/* --------------------------------------------------
	パンくずリスト
-------------------------------------------------- */
.topicPath li:last-child {
	clear: left;
}
/* --------------------------------------------------
	main
-------------------------------------------------- */
#detailMain {
	padding: 20px 10px 150px;
}
#detailMain .leftDetail,
#detailMain .rightBox {
	float: none;
	width: 100%;
	margin: 0;
}
#detailMain aside {
	display: none;
}
/* --------------------------------------------------
	この子の詳細情報
-------------------------------------------------- */
#detailMain .leftDetail > div {
	margin: 0;
	padding: 20px 10px;
}
#detailMain .leftDetail .infoLeft,
#detailMain .leftDetail .infoRight {
	float: none;
	width: 100%;
}
#detailMain .leftDetail .infoLeft {
	max-width: none;
}
	#detailMain .leftDetail .infoLeft p {
		max-width: 480px;
		margin: 0 auto;
	}
	#detailMain .leftDetail .infoLeft .photoWrapper {
		padding-top: 50%;
		padding-bottom: 50%;
	}
	#detailMain .leftDetail .infoLeft .photoWrapper #photoView{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	#detailMain .leftDetail .infoLeft #photoView #flipPhoto .flipItem img {
		max-height: 300px;
		max-width: 300px;
	}
#detailMain .leftDetail .infoRight {
	margin: 0;
}
	#detailMain .leftDetail .infoRight > div {
		margin-left: 0;
	}

#detailMain .leftDetail .infoMiddle p {
	width: 100%;
	max-width: none;
}
#detailMain .leftDetail .infoTable th,
#detailMain .infoShop .infoTable th {
	width: 30%;
}
#detailMain .leftDetail .infoTable td,
#detailMain .infoShop .infoTable td {
	width: 70%;
}
#detailMain .leftDetail .infoBottom .dispVideo{
	width: 100%;
	max-width: none;
}
	#detailMain .leftDetail .infoBottom .dispVideo iframe{
		width: 100%;
		height: 240px;
	}
#detailMain .leftDetail .infoBottom .creatureComment{
	width: 100%;
	margin: 20px 0 20px 0;
}


#detailMain .leftDetail .inspectionInfo .inspections {
	display: block;
}
#detailMain .leftDetail .inspectionInfo dl {
	display: block;
}
#detailMain .leftDetail .inspectionInfo dl dt {
	display: block;
	width: 100%;
}
#detailMain .leftDetail .inspectionInfo dl dd {
	display: block;
	width: 100%;
}
#detailMain .leftDetail .inspectionInfo dl dd img {
	width: calc(100% / 5 - 10px);
}
#detailMain .leftDetail .inspectionInfo dl dd div {
	margin: 10px 0;
}

#detailMain .leftDetail .inspectionInfo > img {
	float: none;
	display: block;
	margin: auto;
}
#detailMain .leftDetail .inspectionInfo > img + div.description {
	width: 80%;
	margin: 20px auto;
	float: none;
}
#detailMain .leftDetail .inspectionInfo > img + div.description p {
	width: auto;
}

#detailMain .leftDetail .present p {
	padding: 25px 10px 80px;
	background-position: 98% 93%;
}
/*予約フォームへ進むボタン*/
#detailMain .leftDetail .btnApply {
	width: 100%;
	margin: 30px auto 0;
}
#detailMain #qrCnt .btnApply {
	/*margin: 30px auto;*/
}
/* SNS */
#detailMain .leftDetail .snsBox {
	display: table;
	width: 100%;
	margin: 20px 0;
	padding: 0 10px;
}
#detailMain #qrCnt .infoRight .snsBox {
	display: none;
}
	#detailMain .leftDetail .snsBox dt,
	#detailMain .leftDetail .snsBox dd {
		display: table-cell;
		vertical-align: middle;
	}
	#detailMain .leftDetail .snsBox dt {
		width: 55%;
		font-size: 11px;
		font-weight: 500;
		text-align: left;
	}
	#detailMain .leftDetail .snsBox dd {
		width: 45%;
		text-align: right;
	}
#detailMain .leftDetail .snsBox ul li {
	display: inline-block;
	width: 30px;
}
#detailMain .leftDetail .snsBox ul {
	width: 100%;
}
#detailMain .leftDetail .snsBox ul li + li {
	margin-left: 5%;
}
#detailMain #qrCnt .infoPet > .infoTable th {
	width: 30%;
}
#detailMain #qrCnt .infoPet > .infoTable td {
	width: 70%;
}
/* ペットショップ詳細
-------------------------------------------------- */
#detailMain .infoShop .mapArea,
#detailMain .infoShop .mapArea > div,
#detailMain .infoShop .mapArea > p {
	display: block;
	width: 100%;
}
#detailMain .infoShop .mapArea > div {
	max-width: none;
}
#detailMain .infoShop .mapArea > p {
	padding: 0;
	text-align: center;
}
#detailMain .infoShop .mapArea .btnApply {
	display: block;
	padding: 0;
}

/* --------------------------------------------------
	このペットショップのワンちゃん・ネコちゃん
-------------------------------------------------- */
#detailMain .gallery .ttl br {
	display:block;
}
#detailMain .gallery .photoBox ul .dispDna {
	left: -50px;
}
/* 生体パネル */
#detailMain .result > ul > li {
	height: 300px;
	background-position: 98% 250px;
}