@charset "UTF-8";
/* CSS Document */
/*===================================================
	土台作成用CSS(スマホ)
===================================================*/
/*//////////////////////////////////////////////////
	Base set
///////////////////////////////////////////////////*/
html, body {
	min-width: 320px;
}

/* --------------------------------------------------
	header
-------------------------------------------------- */
header .headBox {
	padding: 10px;
}
/* ヘッダー下部
-------------------------------------------------- */
header .headBtm {
	/* padding: 10px; */
}
	header .headBtm .headBox > dl {
		font-size: 10px;
	}
		header .headBtm .headBox > dl > *,
		header .headBtm .headBox > dl > dd dl {
			display: block;
		}
			header .headBtm .headBox > dl > dt,
			header .headBtm .headBox > dl > dd dl {
				margin-right: 0;
			}
				header .headBtm .headBox > dl > dd dl dt,
				header .headBtm .headBox > dl > dd dl dd {
					font-size: 10px;
				}
/* ロゴ */
header .headBtm .headBox > p {
padding-top: 1em;
}

/* お知らせ
-------------------------------------------------- */
#information > dl {
	line-height: 18px;
	padding-top: 0;
}
#information > dl > dt {
	padding: 10px 0 0;
	clear: none;
	float: none;
}
#information > dl > dd {
	padding: 0;
	width: 100%;
	float: none;
}

/* モーダルウインドウ
-------------------------------------------------- */
.modalContent {
	height: 100%;
	margin: auto;
}

/* 品種・地域一覧
-------------------------------------------------- */
.modalSelect label {
	width: 100%;
}
.conBreed {
	width: 90%;
	height: 90%;
}
	.conBreed .breedList {
		position: static;
		height: 100%;
	}
/* エリア選択 */
#conMap {
	width: 90%;
	height: 90%;
}
	#conMap #map {
		background: url("../../../publics/img/result/2x/image_map.png") center center no-repeat;
		background-size: 250px auto;
		min-width: 250px;
		max-width: 250px;
		min-height: 250px;
		max-height: 250px;
		margin: 40px auto;
	}

		#conMap #map .btnArea {
			display: none;
		}
		#conMap #map .btnAreaNum,
		#conMap #mapBtm {
			display: block;
		}

		/* 地図上の数字ボタン */
		#conMap ul li.btnAreaNum {
			display: block;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			background: url("../../../publics/img/result/2x/button_blue.png") center center no-repeat;
			background-size: 30px auto;
			cursor: pointer;
		}
		#conMap ul li.btnAreaNum.selectArea {
			background: url("../../../publics/img/result/2x/button_orange.png") center center no-repeat;
			background-size: 30px auto;
		}

		#conMap ul li.btnAreaNum:nth-child(1) {
			position: absolute;
			top: 15px;
			left: 130px;
		}
		#conMap ul li.btnAreaNum:nth-child(2) {
			position: absolute;
			top: 90px;
			left: 220px;
		}
		#conMap ul li.btnAreaNum:nth-child(3) {
			position: absolute;
			top: 140px;
			left: 220px;
		}
		#conMap ul li.btnAreaNum:nth-child(4) {
			position: absolute;
			top: 80px;
			left: 120px;
		}
		#conMap ul li.btnAreaNum:nth-child(5) {
			position: absolute;
			top: 200px;
			left: 130px;
		}
		#conMap ul li.btnAreaNum:nth-child(6) {
			position: absolute;
			top: 200px;
			left: 90px;
		}
		#conMap ul li.btnAreaNum:nth-child(7) {
			position: absolute;
			top: 80px;
			left: 65px;
		}
		#conMap ul li.btnAreaNum:nth-child(8) {
			position: absolute;
			top: 200px;
			left: 30px;
		}
		#conMap ul li.btnAreaNum:nth-child(9) {
			position: absolute;
			top: 110px;
			left: 10px;
		}
		#conMap ul li.btnAreaNum:nth-child(10) {
			position: absolute;
			top: 230px;
			left: 220px;
		}

		/* ボタン（下部） */
		#conMap #mapBtm {
			height: 160px;
			min-height: 160px;
			max-height: 160px;
			margin: 10px 0;
			position: relative;
		}

		#conMap #mapBtm .btnBtmArea:active,
		#conMap #mapBtm .btnBtmArea.selectArea:active {
			margin-top:2px;
			height: 34px;
			border-bottom: none;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(1n) {
			display: inline-block;
			width: 100px;
			height: 36px;
			padding: 8px 0;
			text-align: center;
			font-size: 13px;
			font-weight: 500;
			cursor: pointer;
			font-family: 'rounded-mplus';
			font-weight: 300;
			font-size: 12px;
			border-top: none;
			border-left: none;
			border-right: none;
			border-bottom: 2px solid #D1D0CB;
			border-radius: 4px;
			background: #E8E7E3;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
		}

		#conMap #mapBtm .btnBtmArea:nth-child(1n) {
			top: unset;
			left: unset;
			width: 30%;
			padding-left: 40px;
			text-align: left;
			position: absolute;
			bottom: -35px;
			left: 2.5%;
		}
			#conMap #mapBtm .btnBtmArea.selectArea:nth-child(1n) {
				color: #FFFFFF;
				border-bottom: 2px solid #89AF33;
				background: #90C31F;
			}

		#conMap #mapBtm .btnBtmArea:nth-child(1n):active,
		#conMap #mapBtm .btnBtmArea.selectArea:nth-child(1n):active {
			margin-top:2px;
			height: 34px;
			border-bottom: none;
		}

		#conMap #mapBtm .btnBtmArea:nth-child(1n)::before {
			position: absolute;
			top: 5px;
			left: 7px;
			display: block;
			width: 26px;
			height: 26px;
			text-align: center;
			line-height: 26px;
			background: url("../../../publics/img/result/2x/button_blue.png") left center no-repeat;
			background-size: 26px auto;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(1n).selectArea::before {
			color: #444444;
			background: url("../../../publics/img/result/2x/button_orange.png") center center no-repeat;
			background-size: 26px auto;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(1) {
			position: absolute;
			top: 0;
			left: 2.5%;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(1)::before {
			content: '1';
		}
		#conMap #mapBtm .btnBtmArea:nth-child(2) {
			position: absolute;
			top: 0;
			left: 35%;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(2)::before {
			content: '2';
		}
		#conMap #mapBtm .btnBtmArea:nth-child(3) {
			position: absolute;
			top: 0;
			left: 67.5%;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(3)::before {
			content: '3';
		}
		#conMap #mapBtm .btnBtmArea:nth-child(4) {
			position: absolute;
			top: 40px;
			left: 2.5%;
			padding-top: 0;
			padding-bottom: 0;
			line-height:17px;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(4)::before {
			content: '4';
		}
		#conMap #mapBtm .btnBtmArea:nth-child(5) {
			position: absolute;
			top: 40px;
			left: 35%;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(5)::before {
			content: '5';
		}
		#conMap #mapBtm .btnBtmArea:nth-child(6) {
			position: absolute;
			top: 40px;
			left: 67.5%;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(6)::before {
			content: '6';
		}
		#conMap #mapBtm .btnBtmArea:nth-child(7) {
			position: absolute;
			top: 80px;
			left: 2.5%;
			padding-top: 0;
			padding-bottom: 0;
			line-height:17px;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(7)::before {
			content: '7';
		}
		#conMap #mapBtm .btnBtmArea:nth-child(8) {
			position: absolute;
			top: 80px;
			left: 35%;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(8)::before {
			content: '8';
		}
		#conMap #mapBtm .btnBtmArea:nth-child(9) {
			position: absolute;
			top: 80px;
			left: 67.5%;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(9)::before {
			content: '9';
		}
		#conMap #mapBtm .btnBtmArea:nth-child(10) {
			position: absolute;
			top: 120px;
			left: 2.5%;
		}
		#conMap #mapBtm .btnBtmArea:nth-child(10)::before {
			content: '10';
		}

	#conMap .modalBtm {
		padding: 10px 0;
	}
/* 地域選択 */
#conRegion {
	width: 90%;
	height: 90%;
}
	#conRegion .checkBox {
	}
	#conRegion dl dt {
		padding: 5px 10px;
		background: url("../../../common/img/1x/icon_plus.png") 98% center no-repeat #F5F5F5;
		background-size: 14px auto;
	}
	#conRegion dl dt.active {
		background: url("../../../common/img/1x/icon_minus.png") 98% center no-repeat #F5F5F5;
		background-size: 14px auto;
	}
	#conRegion dl dd {
		display: none;
		padding: 15px 10px;
	}
	#conRegion .modalBtm {
		padding: 10px 0;
	}
/* 遺伝子検査詳細解説 */
#conDna {
	width: 90%;
	height: 90%;
}
	#conDna .modalTop {
		padding: 30px 0 30px;
	}
	#conDna .modalTop img {
		width: 200px;
		height: auto;
		margin-bottom: 15px;
	}
	#conDna p.modalClose {
		top: 0;
	}

/* 遺伝子検査詳細解説 */
#conDisease {
	width: 90%;
}
/* お問い合わせ内容入力 */
#conContactInput {
	width: 90%;
}
#conContactInput .innerModal {
	max-height: 80vh;
}
#conContactInput p > span {
	display: block;
}
#conContactInput dl dt,
#conContactInput dl dd {
	display: block;
}
#conContactInput dl dt {
	width: 100%;
}
#conContactInput dl dd input,
#conContactInput dl dd textarea {
	width: 100%;
}
#conContactInput form > p.btnNext {
	width: 100%;
}
/* お問い合わせ内容確認 */
#conContactConfirm {
	width: 90%;
}
#conContactConfirm .innerModal {
	max-height: 80vh;
}
#conContactConfirm form {
	padding-bottom: 50px;
}
#conContactConfirm form .btmButton p.btnNext {
	width: 100%;
}
#conContactConfirm form .btmButton p.btnBack {
	bottom: -60px;
	left: 0px;
	width: 200px;
}
/* お問い合わせ完了 */
#conContactComplete {
	width: 90%;
}
#conContactComplete .innerModal {
	max-height: 80vh;
}

/* --------------------------------------------------
	main
-------------------------------------------------- */
/* 利用規約 */
#tos {
	font-family: HiraKakuPro-W3, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
}
#tos .cntBox .requirements {
	-webkit-flex-direction: column;
	flex-direction: column;
}
#tos .cntBox .requirements li:nth-child(2),
#tos .cntBox .requirements li:nth-child(3) {
	margin-top: 10px;
}

/* --------------------------------------------------
	写真表示
-------------------------------------------------- */
.result > ul {
	width: 100%;
	margin: 0;
}
	.result > ul > li {
		display: block;
		width: 100%;
		height: 280px;
		margin: 0 0 30px 0;
		background-position: 98% 230px;
	}
		.result > ul > li > a {
			padding: 30px 10px 10px;
		}

/* --------------------------------------------------
	店舗パネル
-------------------------------------------------- */
.shopGallery {
	width: 100%;
}
.shopGallery .result > ul {
	width: 100%;
	margin: 0;
}
	.shopGallery .result > ul > li {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0 0 20px 0;
		padding-top: 20px;
		background-image: none;
	}
		.shopGallery .result > ul > li > a {
			padding: 30px 10px 10px;
		}
	.shopGallery .result > ul > li .shopNameBox {
		margin: 0 auto;
		width: calc(100% - 40px);
	}
	.shopGallery .result > ul > li .catchPhrase {
		margin: 15px auto 0;
		/* width: calc(100% - 40px); */
	}
	.shopGallery .result > ul > li .infoBox {
		position: relative;
		min-height: 15px;
	}

	.shopGallery .result > ul > li .shopBtnBox {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.shopGallery .result > ul > li .shopBtnBox .btnShopDetail {
		width: 100%;
	}

/* --------------------------------------------------
	バッジエリア表示場所
-------------------------------------------------- */
.searchCnt .result > ul .badgeBox,
#detailMain .result > ul .badgeBox {
	width: 70px;
	left: 80px;
	top: 16px;
}
/* --------------------------------------------------
	遺伝子検査済みバッジ
-------------------------------------------------- */
.searchCnt .result > ul .dnaBadge,
#detailMain .result > ul .dnaBadge {
	width: 30px;
	height: 30px;
	z-index: 2;
	background-size: 30px auto;
}
.searchCnt .txtAttention {
	margin-bottom: 20px;
}
.badgeNote{
	margin-bottom: 26px;
}
/* --------------------------------------------------
	案内終了バッジ
-------------------------------------------------- */
.searchCnt .result > ul .endBadge,
#detailMain .result > ul .endBadge {
	width: 30px;
	height: 30px;
	z-index: 2;
	background-size: 30px auto;
}


/* --------------------------------------------------
	パンくずリスト
-------------------------------------------------- */
.topicPath {
	padding: 15px 10px;
}
/* どうぶつ写真・名前・価格
-------------------------------------------------- */
.photoBox {
	overflow: hidden;
}
	/* どうぶつ写真(種別) */
	.photoBox > p {
		float:left;
		width: 140px;
		height: 140px;
		line-height: 140px;
	}
		.photoBox > p img {
			max-width: 140px;
			max-height: 140px;
		}
	.photoBox div {
		float:right;
		width: 100%;
		margin: 0 0 0 -140px;
		padding-left: 2%;
		vertical-align: top;
	}
	.photoBox div > dl,
	.photoBox div > ul {
		margin: 0 0 0 140px;
	}
	/* 名前 */
	.photoBox dl dt {
		min-height: 0;
	}
	.photoBox dl dd {
		text-align: right;
	}
		/* 価格 */
		.photoBox dl dt + dd {
			display: inline-block;
		}
			.photoBox dl dt + dd em {
				display: block;
				text-align: left;
			}
	.photoBox dl dd + dd {
		text-align: left;
		margin-bottom: 5px;
	}
	/* アイコン、性別、遺伝子 */
	.photoBox ul {
		position: static;
		left: 0;
		top:0;
		width: 100%;
		height: 55px;
		text-align: left;
	}
		.photoBox ul li {
			width: 50px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			border-radius: 6px;
		}
		.photoBox ul li img {
			display: block;
			margin: auto;
		}
		.photoBox ul .dispAnimal {
			width: 35px;
			background: none;
			margin-left: 0;
		}
		.photoBox ul .dispDna {
			position: relative;
			top: 25px;
			left: -50px;
			height: 30px;
		}
/* どうぶつ情報
-------------------------------------------------- */
.infoBox dl dt {
	float: left;
	width: 6em;
}
.infoBox dl dd {
	float: none;
	width: 100%;
	margin-left: 6em;
	padding-right: 6em;
}
/* ローディング
-------------------------------------------------- */
#loading {
	bottom: 132px;
}
/* 件数表示
-------------------------------------------------- */
#listCount {
	bottom: 92px;
	position: fixed;
}
/* --------------------------------------------------
	ページトップ
-------------------------------------------------- */
#pagetop {
	position: fixed;
	right: 10px;
	bottom: 100px;
}
/* --------------------------------------------------
	キャンペーンアイコン
-------------------------------------------------- */
#campaignIcon {
	position: fixed;
	right: 10px;
	bottom: 180px;
}
	#campaignIcon a .campaignIcon-pc {
		display: none;
	}
	#campaignIcon a .campaignIcon-smp {
		display: block;
	}
/* --------------------------------------------------
	footer
-------------------------------------------------- */
/*検索結果なし*/
footer.noFade {
	/* position: relative; */
}
	footer.noFade #pagetop {
		position: absolute;
	}
	footer ul,
	footer p {
		float: none;
		text-align: center;
	}

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

/* 地域一覧アコーディオン */
#conRegion dl dt {
	background: url("../../../common/img/2x/icon_plus.png") 98% center no-repeat #F5F5F5;
	background-size: 14px auto;
}
	#conRegion dl dt.active {
		background: url("../../../common/img/2x/icon_minus.png") 98% center no-repeat #F5F5F5;
		background-size: 14px auto;
	}

/* 遺伝子検査済み */
.photoBox ul .dispDna {
	background-image: url("../../../common/img/2x/icon_i.png");
	background-size: 14px auto;
}

}