@charset "UTF-8";

/* CSS Document */

/*===================================================
    各画面作成用CSS
===================================================*/

/*//////////////////////////////////////////////////
    病気や予防
///////////////////////////////////////////////////*/

/* --------------------------------------------------
    キービジュアル
-------------------------------------------------- */
.kv {
	background: url("../image/prevention/prevention_kv.png") center no-repeat;
    background-size: cover;
}

/* --------------------------------------------------
    トップのメニュー一覧
-------------------------------------------------- */
.prevention .indexMenu li:first-child a .imgBox img {
	width: 240px;
}
.prevention .indexMenu li:nth-child(2) a .imgBox img {
	width: 90px;
}
.prevention .indexMenu li:nth-child(3) a .imgBox img {
	width: 140px;
}
.prevention .indexMenu li:nth-child(4) a .imgBox img {
	width: 150px;
}
.prevention .indexMenu li:nth-child(5) a .imgBox img {
	width: 200px;
}

/* --------------------------------------------------
    ウェルネスセンター
-------------------------------------------------- */
.healthcare {
	position: relative;
	padding: 40px 60px;
	font-size: 14px;
	z-index: 1;
	border-radius: 4px;
	background: #ebf1f6;
}
.healthcare:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	z-index: -1;
	background: url("../image/common/pattern_pad.png");
	background-size: 97px auto;
}
	.healthcare dt {
		margin-bottom: 20px;
		font-family: Meiryo,"メイリオ";
		font-weight: bold;
		font-size: 16px;
		letter-spacing: 0.1em;
	}
	.setOs .healthcare dt {
		font-family: 'Rounded Mplus 1c';
		font-weight: 700;
	}
	.healthcare dd a {
		display: inline-block;
		padding-right: 1em;
		font-weight: bold;
		color: #024894;
		background: url("../image/common/icon_target_blue.png") right 3px no-repeat;
		background-size: 10px auto;
	}
	.healthcare dd aside p {
		font-size: 12px;
	}

/*//////////////////////////////////////////////////
    動物からの感染症への注意
///////////////////////////////////////////////////*/
#attention .topBox {
	margin-bottom: 60px;
}
#attention .topBox > p {
	padding: 20px 0;
	text-align: center;
	background: #f9f9f9;
}
#attention .topBox > div {
	font-size: 16px;
}

/* pc----------------------------------------------*/
@media (min-width: 769px) {

	#attention .topBox {
		overflow: hidden;
	}
		#attention .topBox > p {
			float: right;
			width: 360px;
		}
			#attention .topBox > p img {
				width: 280px;
			}
		#attention .topBox > div {
			float: left;
			width: 600px;
		}	
}
/* /pc---------------------------------------------*/
#attention table {
	width: 100%;
	margin-bottom: 40px;
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
}
#attention table tr {
	border-bottom: 1px solid #cccccc;
}
#attention table th {
	padding: 10px 0;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid #cccccc;
}
#attention table th:first-child {
	width: 26%;
}
#attention table th:nth-child(2) {
	width: 32%;
}
#attention table thead tr {
	text-align: center;
	background: #fee6e9;
}
#attention table tbody td {
	padding: 15px 20px;
	vertical-align: middle;
	border-right: 1px solid #cccccc;
	background: #fafafa;
}
	#attention table tbody td dl {
		display: table;
		width: 100%;
	}
		#attention table tbody td dl dt {
			display: table-cell;
			width: 30px;
		}
		#attention table tbody td dl dd {
			display: table-cell;
		}
#attention .attentionBox {
	position: relative;
	margin-bottom: 20px;
	padding: 40px 60px;
	z-index: 1;
	border-radius: 4px;
	background: #fee6e9;
}
#attention .attentionBox:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	z-index: -1;
	background: url("../image/common/pattern_pad.png");
	background-size: 97px auto;
}
	#attention .attentionBox dt {
		margin-bottom: 30px;
		font-family: Meiryo,"メイリオ";
		font-weight: bold;
		font-size: 22px;
		text-align: center;
		letter-spacing: 0.1em;
	}
	.setOs #attention .attentionBox dt {
		font-family: 'Rounded Mplus 1c';
		font-weight: 700;
	}
	#attention .attentionBox ul li {
		padding-left: 10px;
		font-size: 14px;
		line-height: 1.8;
		background: url("../image/common/icon_disc_grey.png") left 10px no-repeat;
		background-size: 4px auto;
	}
#attention .apa {
	margin-bottom: 40px;
	padding: 35px 60px;
	font-size: 14px;
	border-radius: 6px;
	/*border: 2px dotted #f8728b;*/
	background: url("../image/common/list_circle_pink.png") left bottom repeat-x,url("../image/common/list_circle_pink.png") left top repeat-x,url("../image/common/list_circle_pink_vertical.png") left top repeat-y,url("../image/common/list_circle_pink_vertical.png") right top repeat-y;
	background-size: 7px auto,7px auto,2.5px auto,2.5px auto;
}

/*//////////////////////////////////////////////////
    検査済証について
///////////////////////////////////////////////////*/
#inspection section + section {
	margin-top: 60px;
}
/* --------------------------------------------------
    検査済証発行からお店に移動するまでに行なうこと
-------------------------------------------------- */
#inspection .flow {
	margin-bottom: 20px;
}
#inspection .flow li {
	font-size: 14px;
}
	#inspection .flow li dl dt {
		position: relative;
		padding-left: 30px;
		font-size: 16px;
		font-weight: bold;
	}
	#inspection .flow li:nth-child(-n+2) dl dt {
		line-height: 50px;
	}
	#inspection .flow li:nth-child(3) dl dt {
		line-height: 1.3;
		height: 50px;
	}
		#inspection .flow li dl dt span {
			position: absolute;
			width: 24px;
			height: 24px;
			font-family: Meiryo,"メイリオ";
			font-weight: bold;
			font-size: 16px;
			color: #ffffff;
			text-align: center;
			line-height:24px;
			border-radius: 50%;
			background: #f86984;
		}
		.setOs #inspection .flow li dl dt span {
			font-family: 'Rounded Mplus 1c';
			font-weight: 700;
		}
		#inspection .flow li:nth-child(-n+2) dl dt span {
			top: 0;
			bottom: 0;
			left: 0;
			margin: auto 0;
		}
		#inspection .flow li:nth-child(3) dl dt span {
			top: 8px;
			left: 0;
		}
	#inspection .flow li .imgBox {
		position: relative;
		margin-bottom: 20px;
	} 
/* pc----------------------------------------------*/
@media (min-width: 769px) {

	#inspection .flow li {
		float: left;
		width: 260px;
	}
	#inspection .flow li + li {
		margin: 0 0 0 110px;
	}
	#inspection .flow li .imgBox:after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: -60px;
		width: 12px;
		height: 20px;
		margin: auto 0;
		background: url("../image/common/icon_arrow_right_grey.png") no-repeat;
	}
	#inspection .flow li:last-child .imgBox:after {
		background: none;
	}
}
/* /pc---------------------------------------------*/

/* --------------------------------------------------
    検査済証に記載されている項目の説明
-------------------------------------------------- */
#inspection .explain {
	margin-bottom: 40px;
	padding: 40px 60px;
	background: #f9f9f9;
}
#inspection .explain01 {
	margin-bottom: 40px;
}
#inspection .explain01 {
	position: relative;
}
#inspection .explain01 > div {
	padding: 25px 0;
	text-align: center;
	background: #ffffff;
}
	#inspection .explain01 > div p {
		position: relative;
		width: 180px;
		margin: 0 auto;
	}
	#inspection .explain01 > div + div p {
		width: 200px;
	}
#inspection .explain span {
	position: absolute;
	width: 24px;
	height: 24px;
	font-family: Meiryo,"メイリオ";
	font-weight: bold;
	font-size: 16px;
	color: #ffffff;
	text-align: center;
	line-height:24px;
	border-radius: 50%;
	background: #f86984;
}
.setOs #inspection .explain span {
	font-family: 'Rounded Mplus 1c';
	font-weight: 700;
}
#inspection .explain .one {
	left: 80px;
	bottom: 33px;
}
#inspection .explain .two {
	left: 0;
	right: 0;
	bottom: 50px;
	margin: 0 auto;
}
#inspection .explain .three {
	left: 0;
	right: 0;
	bottom: 100px;
	margin: 0 auto;
}
#inspection .explain .four01 {
	left: 50px;
	bottom: 70px;
}
#inspection .explain .four02 {
	right: 50px;
	bottom: 70px;
}
#inspection .explain .five {
	top: 15px;
	right: 25px;
}

#inspection .explain ol li + li {
	margin-top: 40px;
}
	#inspection .explain ol li dl dt {
		position: relative;
		margin-bottom: 10px;
		padding-left: 30px;
		font-size: 16px;
		font-weight: bold;
	}
		#inspection .explain ol li dl dt span {
			top: 0;
			bottom: 0;
			left: 0;
			margin: auto 0;
		}
		#inspection .explain ol li dl dt small {
			display: inline-block;
			margin-left: 0.5em;
			font-family: Meiryo,"メイリオ";
			font-weight: bold;
			font-size: 14px;
		}
		.setOs #inspection .explain ol li dl dt small {
			font-family: 'Rounded Mplus 1c';
			font-weight: 400;
		}
	#inspection .explain ol li dl dd p em {
		font-weight: bold;
	}
	#inspection .explain ol li dl dd aside p {
		font-size: 12px;
	}

/* pc----------------------------------------------*/
@media (min-width: 769px) {

	#inspection .explain01 > div {
		position: absolute;
		top: 0;
		left: 0;
		width: 300px;
	}
	#inspection .explain01 > div + div {
		top: 315px;
	}
	#inspection .explain01 > ol {
		padding: 0 0 0 330px;
	}

}
/* /pc---------------------------------------------*/

#inspection .explain + p {
	font-size: 16px;
	font-family: Meiryo,"メイリオ";
	font-weight: bold;
	text-align: center;
}
.setOs #inspection .explain + p {
	font-family: 'Rounded Mplus 1c';
	font-weight: 700;
	letter-spacing: 0.15em;
}
/*//////////////////////////////////////////////////
    動物病院でできること
///////////////////////////////////////////////////*/
#animalHospital .topBox {
	margin-bottom: 60px;
}
#animalHospital .topBox > p {
	padding: 20px 0;
	text-align: center;
	background: #f9f9f9;
}
#animalHospital .topBox > div {
	font-size: 16px;
}

/* pc----------------------------------------------*/
@media (min-width: 769px) {

	#animalHospital .topBox {
		overflow: hidden;
	}
		#animalHospital .topBox > p {
			float: right;
			width: 360px;
		}
			#animalHospital .topBox > p img {
				width: 180px;
			}
		#animalHospital .topBox > div {
			float: left;
			width: 600px;
		}	
}
/* /pc---------------------------------------------*/

/* --------------------------------------------------
   混合ワクチン
-------------------------------------------------- */
#animalHospital .mix {
	margin-bottom: 40px;
	padding: 40px 60px;
	font-size: 14px;
	background: #f9f9f9;
}
	#animalHospital .mix dt {
		margin-bottom: 10px;
		padding-left: 20px;
		font-size: 16px;
		font-weight: bold;
		line-height: 1;
		background: url("../image/common/ttl_paw.png") left top no-repeat;
		background-size: 16px auto;
	}

/* --------------------------------------------------
   主な感染症とワクチン接種の組み合わせ
-------------------------------------------------- */
#animalHospital .combination {
	margin-bottom: 40px;
}
	#animalHospital .combination dl dt {
		min-height: 50px;
		font-size: 14px;
		line-height: 1.2;
	}
		#animalHospital .combination dl dt em {
			display: block;
			font-size: 16px;
		}
	#animalHospital .combination table {
		width: 100%;
		border-top: 1px solid #cccccc;
		border-left: 1px solid #cccccc;
	}
	#animalHospital .combination table tr {
		border-bottom: 1px solid #cccccc;
	}
	#animalHospital .combination table th {
		padding: 10px 0;
		border-right: 1px solid #cccccc;
	}
	#animalHospital .combination table thead th {
		font-weight: bold;
		text-align: center;
		background: #fee6e9;
	}
	#animalHospital .combination table tbody th {
		width: 45%;
		padding: 5px 10px;
		background: #ffffff;
	}
	#animalHospital .combination table td {
		text-align: center;
		vertical-align: middle;
		border-right: 1px solid #cccccc;
		background: #fafafa;
	}
/* pc----------------------------------------------*/
@media (min-width: 769px) {

	#animalHospital .combination {
		overflow: hidden;
	}
		#animalHospital .combination dl {
			float: left;
			width: 545px;
		}
		#animalHospital .combination dl + dl {
			float: right;
			width: 425px;
			padding: 0 20px 0 0;
		}
			#animalHospital .combination dl dt {
				padding: 5px 0 0 70px;
			}
}
/* /pc---------------------------------------------*/

/* --------------------------------------------------
   デビュー
-------------------------------------------------- */
#animalHospital .debut {
	position: relative;
	margin-bottom: 20px;
	padding: 40px 60px;
	z-index: 1;
	border-radius: 4px;
	background: #fee6e9;
}
#animalHospital .debut:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	z-index: -1;
	background: url("../image/common/pattern_pad.png");
	background-size: 97px auto;
}
	#animalHospital .debut dt {
		margin-bottom: 30px;
		font-family: Meiryo,"メイリオ";
		font-weight: bold;
		font-size: 22px;
		text-align: center;
		letter-spacing: 0.1em;
	}
	.setOs #animalHospital .debut dt {
		font-family: 'Rounded Mplus 1c';
		font-weight: 700;
	}
	#animalHospital .debut dd > p {
		font-size: 16px;
	}
	#animalHospital .debut dd aside p {
		font-size: 12px;
	}
/* --------------------------------------------------
   ワクチン接種・目安の時期
-------------------------------------------------- */
#animalHospital .timing {
	position: relative;
	margin-bottom: 60px;
	padding: 40px 60px;
	z-index: 1;
	border-radius: 4px;
	background: #fff5f5;
}
	#animalHospital .timing dt {
		margin-bottom: 10px;
		font-size: 18px;
		font-weight: bold;
	}
	#animalHospital .timing dd {
		font-size: 14px;
	}
		#animalHospital .timing dd aside p {
			font-size: 12px;
		}

/* --------------------------------------------------
 	section  
-------------------------------------------------- */
#animalHospital section + section {
	margin-top: 60px;
}
#animalHospital h3 + p {
	margin-bottom: 20px;
	font-size: 16px;
}
#animalHospital .box1 {
	padding: 40px 60px;
	background: #f9f9f9;
}
	#animalHospital .box1 dl + dl {
		margin-top: 40px;
	}
		#animalHospital .box1 dl dt {
			margin-bottom: 10px;
			padding-left: 20px;
			font-size: 16px;
			font-weight: bold;
			line-height: 1;
			background: url("../image/common/ttl_paw.png") left top no-repeat;
			background-size: 16px auto;
		}
		#animalHospital .box1 dl dd em {
			display: block;
			margin-bottom: 10px;
			font-size: 16px;
		}
		#animalHospital .box1 .change {
			max-width: 520px;
			padding: 20px;
			font-size: 12px;
			background: #ffffff;
		}
			#animalHospital .box1 .change > p {
				margin-bottom: 5px;
				font-weight: bold;
			}
			#animalHospital .box1 .change ul li {
				padding-left: 10px;
				background: url("../image/common/icon_disc_grey.png") left 5px no-repeat;
				background-size: 4px auto;
			}
#animalHospital .supplement {
	margin-top: 10px;
	padding: 35px 60px;
	font-size: 14px;
	border-radius: 6px;
	/*border: 2px dotted #f8728b;*/
	background: url("../image/common/list_circle_pink.png") left bottom repeat-x,url("../image/common/list_circle_pink.png") left top repeat-x,url("../image/common/list_circle_pink_vertical.png") left top repeat-y,url("../image/common/list_circle_pink_vertical.png") right top repeat-y;
	background-size: 7px auto,7px auto,2.5px auto,2.5px auto;
}
	#animalHospital .supplement aside p {
		font-size: 12px;
	}

#animalHospital .box2 {
	margin-bottom: 60px;
	padding: 40px 60px;
	background: #f9f9f9;
}
	#animalHospital .box2 ul li + li {
		margin-top: 40px;
	}
		#animalHospital .box2 ul li > p {
			padding: 20px;
			text-align: center;
			border-radius: 4px;
			background: #ffffff;
		}
		#animalHospital .box2 dl dt {
			margin-bottom: 10px;
			padding-left: 20px;
			font-size: 16px;
			font-weight: bold;
			background: url("../image/common/ttl_paw.png") left 5px no-repeat;
			background-size: 16px auto;
		}
		#animalHospital .box2 dl dd {
			font-size: 14px;
		}
		#animalHospital .box2 dl dd + dd {
			display: inline-block;
			padding: 20px;
			font-size: 12px;
			background: #ffffff;
		}

/* pc----------------------------------------------*/
@media (min-width: 769px) {

	#animalHospital .box2 ul li {
		overflow: hidden;
	}
		#animalHospital .box2 ul li > p {
			float: left;
			width: 120px;
		}
			#animalHospital .box2 ul li:first-child p img {
				width: 80px;
			}
			#animalHospital .box2 ul li:nth-child(2) p img {
				width: 80px;
			}
			#animalHospital .box2 ul li:nth-child(3) p img {
				width: 50px;
			}
		#animalHospital .box2 ul li > dl {
			float: left;
			width: 740px;
			padding-left: 20px;
		}
}
/* /pc---------------------------------------------*/

#animalHospital .caution {
	position: relative;
	margin-bottom: 60px;
	padding: 40px 60px;
	z-index: 1;
	border-radius: 4px;
	background: #fff5f5;
}
	#animalHospital .caution dt {
		margin-bottom: 10px;
		font-size: 18px;
		font-weight: bold;
	}
	#animalHospital .caution dd {
		font-size: 14px;
	}
		#animalHospital .caution dd aside p {
			font-size: 12px;
		}

/*//////////////////////////////////////////////////
    ワクチンで予防できる病気
///////////////////////////////////////////////////*/
#vaccine section + section {
	margin-top: 60px;
}
#vaccine .box {
	padding: 40px 60px;
	font-size: 14px;
	background: #f9f9f9;
}
	#vaccine .box dl + dl {
		margin-top: 40px;
	}
		#vaccine .box dl dt {
			margin-bottom: 10px;
			padding-left: 20px;
			font-size: 16px;
			font-weight: bold;
			background: url("../image/common/ttl_paw.png") left 5px no-repeat;
			background-size: 16px auto;
		}
			#vaccine .box dl dt span {
				font-size: 14px;
				font-weight: normal;
			}
		#vaccine .box dl dd aside p {
			font-size: 12px;
		}
		#vaccine .box dl dd aside ul li {
			position: relative;
			padding-left: 1em;
			font-size: 12px;
		}
		#vaccine .box dl dd aside ul li:before {
			content: '※';
			position: absolute;
			left: 0;
		}
#vaccine .box + p {
	margin: 40px 0;
	font-size: 16px;
}
#vaccine .caution {
	padding: 40px 60px;
	background: #fff5f5;
}
	#vaccine .caution h4 {
		margin-bottom: 20px;
		padding-left: 30px;
		font-size: 18px;
		font-weight: bold;
		background: url("../image/common/icon_caution.png") left 5px no-repeat;
		background-size: 20px auto;
	}
	#vaccine .caution dl dt {
		margin-bottom: 10px;
		padding-left: 20px;
		font-size: 16px;
		font-weight: bold;
		line-height: 1;
		background: url("../image/common/ttl_paw.png") left top no-repeat;
		background-size: 16px auto;
	}
		#vaccine .caution dl dt span {
			font-size: 14px;
			font-weight: normal;
		}
	#vaccine .caution dl dd {
		font-size: 14px;
	}

/*//////////////////////////////////////////////////
    気になる内部寄生虫と皮膚病の話
///////////////////////////////////////////////////*/
#parasite .topBox {
	margin-bottom: 40px;
	font-size: 16px;
}
	#parasite .topBox dt {
		margin-bottom: 30px;
		font-family: Meiryo,"メイリオ";
		font-weight: bold;
		color: #f86984;
		text-align: center;
		letter-spacing: 0.18em;
	}
	.setOs #parasite .topBox dt {
		font-family: 'Rounded Mplus 1c';
		font-weight: 700;
	}
#parasite .box {
	padding: 40px 60px;
	font-size: 14px;
	background: #f9f9f9;
}
	#parasite .box dl + dl {
		margin-top: 40px;
	}
		#parasite .box dl dt {
			margin-bottom: 10px;
			padding-left: 20px;
			font-size: 16px;
			font-weight: bold;
			line-height: 1;
			background: url("../image/common/ttl_paw.png") left top no-repeat;
			background-size: 16px auto;
		}
			#parasite .box dl dt span {
				display: inline-block;
				margin-left: 10px;
				font-size: 14px;
				font-weight: normal;
			}
#parasite .box + p {
	margin: 40px 0;
	font-size: 16px;
}