@charset "UTF-8";

/* CSS Document */

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

/*//////////////////////////////////////////////////
    はじめに
///////////////////////////////////////////////////*/

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

/* --------------------------------------------------
    トップのメニュー一覧
-------------------------------------------------- */
.check .indexMenu li:first-child a .imgBox img {
	width: 165px;
}
.check .indexMenu li:nth-child(2) a .imgBox img {
	width: 250px;
}
.check .indexMenu li:nth-child(3) a .imgBox img {
	width: 240px;
}
.check .indexMenu li:nth-child(4) a .imgBox img {
	width: 210px;
}

/*//////////////////////////////////////////////////
    ご理解いただきたいこと
///////////////////////////////////////////////////*/
#understanding h3 {
	margin-bottom: 30px;
	font-family: Meiryo,"メイリオ";
	font-weight: bold;
    text-align: center;
    letter-spacing: 0.2em;
}
.setOs #understanding h3 {
	font-family: 'Rounded Mplus 1c';
    font-weight: 700;
}
#understanding .imgBox {
	margin-bottom: 50px;
	font-size: 15px;
	text-align: center;
}
	#understanding .imgBox img {
		display: block;
	}
	#understanding .imgBox p {
		line-height: 2;
	}
	#understanding .imgBox p + p {
		margin-top: 2em;
	}
#understanding .checkTxt {
	position: relative;
	margin-bottom: 20px;
	border-radius: 4px;
	background: #fff7e0;
}
	#understanding .checkTxt dt {
		position: absolute;
		width: 75px;
	}
	#understanding .checkTxt dd {
		font-size: 16px;
	}
		#understanding .checkTxt dd em {
			font-weight: bold;
		}
#understanding .checkTxt + p {
	margin-bottom: 10px;
	font-size: 13px;
}
#understanding .linkTxt {
	text-align: right;
}
	#understanding .linkTxt a {
		display: inline-block;
		padding-right: 15px;
		font-size: 13px;
		font-weight: bold;
		color: #f86984;
		line-height: 1;
		background: url("../image/common/icon_arrow_pink.png") right top no-repeat;
		background-size: 6px auto;
	}
/* pc----------------------------------------------*/
@media (min-width: 769px) {

	#understanding h3 {
		font-size: 26px;
	}
	#understanding .imgBox img {
		width: 440px;
		margin: 0 auto 30px;
	}
	#understanding .checkTxt {
		padding: 15px 30px;
	}
		#understanding .checkTxt dt {
			top: -10px;
			left: 30px;
		}
}
/* /pc---------------------------------------------*/

/*//////////////////////////////////////////////////
    販売契約について
///////////////////////////////////////////////////*/

/* --------------------------------------------------
    返品、交換
-------------------------------------------------- */
#contract #sec01 {
	margin-bottom: 60px;
}
	#contract #sec01 > div > p {
		display: table;
		background: #f9f9f9;
	}
		#contract #sec01 > div > p span {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
		}
	#contract #sec01 > div > div {
		font-size: 16px;
	}
/* pc----------------------------------------------*/
@media (min-width: 769px) {
	#contract #sec01 > div {
		overflow: hidden;
	}
		#contract #sec01 > div > p {
			float: right;
			width: 360px;
			height: 180px;
		}
			#contract #sec01 > div > p span img {
				width: 300px;
			}
		#contract #sec01 > div > div {
			float: left;
			width: 610px;
		}
}
/* /pc---------------------------------------------*/

/* --------------------------------------------------
    代替え犬・猫保障制度
-------------------------------------------------- */
#contract #sec02 h3 + p {
	margin-bottom: 30px;
	font-size: 16px;
}
#contract #sec02 .caution {
	margin-bottom: 20px;
	padding: 30px 60px;
	background: #fff5f5;
}
	#contract #sec02 .caution > dt {
		margin-bottom: 10px;
		padding-left: 30px;
		font-size: 18px;
		font-weight: bold;
		background-size: 20px auto;
		position: relative;
	}
	#contract #sec02 .caution > dt span{
		font-family: 'Rounded Mplus 1c';
		position: absolute;
		top: 1.5px;
		left: 0;
		width: 24px;
		height: 24px;
		font-size: 16px;
		color: #ffffff;
		text-align: center;
		line-height: 24px;
		border-radius: 50%;
		background: #f86984;
	}
	#contract #sec02 .caution dd > p {
		font-size: 14px;
	}
	#contract #sec02 .caution dd > p .border{
		border-bottom: 1px solid #3f3f3f;
	}
	#contract #sec02 .situation{
		margin-top: 2em;
	}
	#contract #sec02 .situation dt{
		font-size: 16px;
		font-weight: bold;
		margin-top: 1em;
		margin-bottom: 10px;
		line-height: 1;
	}
	#contract #sec02 .cautionList {
		margin-top: 1em;
	}
		#contract #sec02 .cautionList > li {
			padding-left: 8px;
			line-height: 1.8;
			background: url("../image/common/icon_disc_grey.png") left 9px no-repeat;
			background-size: 4px auto;
			position: relative;
		}

		#contract #sec02 .cautionList .circleNumber{
			position: relative;
			padding-left: 25px;
		}

		#contract #sec02 .cautionList .circleNumber span{
			font-family: 'Rounded Mplus 1c';
			position: absolute;
			top: 5px;
			left: 8px;
			width: 15px;
			height: 15px;
			font-size: 12px;
			color: #ffffff;
			text-align: center;
			line-height: 16px;
			border-radius: 50%;
			background: #f86984;
		}

		#contract #sec02 .cautionList .caseList {
			margin: 0.5em 0 1em;
			padding: 15px;
			font-size: 13px;
			background:#ffffff;
		}
			#contract #sec02 .cautionList .caseList > li {
				padding-left: 15px;
				background: url("../image/common/icon_check.png") left 8px no-repeat;
				background-size: 8px auto;
			}

#contract #sec02 .caution + p {
	font-size: 15px;
}

/*//////////////////////////////////////////////////
    血統証明書について
///////////////////////////////////////////////////*/

#pedigree section {
	margin-top: 45px;
}

#pedigree section:first-of-type {
	margin-top: 45px;
}

#pedigree .clearfix > p {
	float: right;
}

#pedigree .clearfix > div {
    float: left;
    width: 620px;
}

#pedigree h3 + p {
	font-size: 16px;
}
#pedigree .flow {
	margin: 1em 0 40px;
	font-size: 16px;
}

.trainingDisaster p {
    font-size: 16px;
}

.topBox p {
    font-size: 16px;
}


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

	#pedigree .flow > div {
		position: relative;
		margin-bottom: 80px;
	}
	#pedigree .flow ol {
		position: relative;
		margin: 1em 0 0;
	}
		#pedigree .flow ol li {
			position: relative;
			float: left;
			width: 90px;
			text-align: center;
			line-height: 220px;
			z-index: 1;
			border-radius: 4px;
			background: #fee6e9;
		}
		#pedigree .flow ol li:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0.6;
			z-index: -1;
			background: url("../image/common/pattern_pad.png");
			background-size: 97px auto;
		}
		#pedigree .flow ol li:after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: -40px;
			width: 24px;
			height: 10px;
			margin: auto 0;
			background: url("../image/check/pc/flow_arrow.png") no-repeat;
		}
		#pedigree .flow ol li:last-child:after {
			background: none;
		}
		#pedigree .flow ol li + li {
			margin-left: 60px;
		}
			#pedigree .flow ol li:first-child img {
				width: 18px;
			}
			#pedigree .flow ol li:nth-child(2) img {
				width: 18px;
			}
			#pedigree .flow ol li:nth-child(3) img {
				width: 18px;
			}
			#pedigree .flow ol li:nth-child(4) img {
				width: 18px;
			}
			#pedigree .flow ol li:nth-child(5) img {
				width: 18px;
			}
			#pedigree .flow ol li:nth-child(6) img {
				width: 16px;
			}
			#pedigree .flow ol li:nth-child(7) img {
				width: 18px;
			}
	#pedigree .flow #moveObj {
		position: absolute;
		left: 10px;
		bottom: -60px;
		width: 80px;
		height: 80px;
		z-index: 1;
	}
		#pedigree .flow #moveObj img {
			position: relative;
		}
}

.pc #pedigree .flow #moveObj.animated {
	/*animation: moveY 2s infinite alternate ease-in, moveX 10s ease-out forwards;
	-webkit-animation: moveY 2s infinite alternate ease-in, moveX 10s ease-out forwards;*/
	animation: moveX 14s ease-out forwards;
	-webkit-animation: moveX 14s ease-out forwards;
}
	.pc #pedigree .flow #moveObj.animated img {
		animation: moveYa 2s infinite alternate ease-in;
		-webkit-animation: moveYa 2s infinite alternate ease-in;
	}

/*　縦の動き　*/
@keyframes moveY {
	/*0% {bottom: -60px;}
	50% {bottom: -40px;}
	100% {bottom:-60px;}*/
	0% { transform:translateY(-10px); }
  100% { transform:translateY(0); }
}

@-webkit-keyframes moveY {
	/*0% {bottom: -60px;}
	50% {bottom: -40px;}
	100% {bottom:-60px;}*/
	0% { -webkit-transform:translateY(-10px); }
  100% { -webkit-transform:translateY(0); }
}

@keyframes moveYa {
	0% {bottom: -10px;}
	50% {bottom: 0;}
	100% {bottom:-10px;}
}

@-webkit-keyframes moveYa {
	0% {bottom: -10px;}
	50% {bottom: 0;}
	100% {bottom:-10px;}
}

/*　横の動き　*/
@keyframes moveX {
	/*0% {left:0px;}
	100% {left:905px;}*/
	0% { transform:translateX(-0); }
  100% { transform:translateX(900px); }
}
@-webkit-keyframes moveX {
	/*0% {left:0px;}
	100% {left:905px;}*/
	0% { -webkit-transform:translateX(-0); }
  100% { -webkit-transform:translateX(900px); }
}
/* /pc---------------------------------------------*/

/* --------------------------------------------------
    所有者の名義変更について
-------------------------------------------------- */
#pedigree .nameChange {
	margin-bottom: 40px;
	padding: 30px 60px;
	font-size: 14px;
	background: #f9f9f9;
}
	#pedigree .nameChange dt {
		margin-bottom: 5px;
		padding-left: 25px;
		font-size: 15px;
		font-weight: bold;
		background: url("../image/common/ttl_paw.png") left 4px no-repeat;
		background-size: 16px auto;
	}
	#pedigree .nameChange dd aside p {
		font-size: 12px;
	}
#pedigree .txtContact {
	margin-bottom: 40px;
	font-size: 14px;
}
	#pedigree .txtContact dt {
		font-weight: bold;
	}
	#pedigree .txtContact dd span {
		font-size: 12px;
	}

/* --------------------------------------------------
    血統証明書の注意点
-------------------------------------------------- */
#pedigree .caution {
	margin-top: 40px; 
	padding: 40px 60px;
	background: #fff5f5;
}
	#pedigree .caution dt {
		margin-bottom: 20px;
		padding-left: 30px;
		font-size: 18px;
		font-weight: bold;
		line-height: 1;
		background: url("../image/common/icon_caution.png") left top no-repeat;
		background-size: 20px auto;
	}
	#pedigree .cautionList > li {
		padding-left: 8px;
		line-height: 1.8;
		background: url("../image/common/icon_disc_grey.png") left 9px no-repeat;
		background-size: 4px auto;
	}
	#pedigree .cautionList + aside p {
		font-size: 12px;
	}

strong {
	font-weight: bold;
}

/*//////////////////////////////////////////////////
    JCK血統証明書の見かた
///////////////////////////////////////////////////*/
#seehow .sample {
	margin-bottom: 60px;
}
#seehow .sample > dt {
	margin-bottom: 20px;
	font-size: 20px;
	font-family: Meiryo,"メイリオ";
	font-weight: bold;
	text-align: center;
	border-radius: 4px;
	background: #fee6e9;
}
.setOs #seehow .sample > dt {
	font-family: 'Rounded Mplus 1c';
    font-weight: 500;
}
#seehow .sample .explainList > li + li {
	margin: 30px 0 0 0;
}
#seehow .sample .explainList > li > dl > dt {
	position: relative;
	margin-bottom: 10px;
	padding-left: 30px;
	font-size: 16px;
	font-weight: bold;
}
	#seehow .sample .explainList > li > dl > dt span {
		position: absolute;
		top: 0;
		left: 0;
		width: 24px;
		height: 24px;
		font-family: 'Rounded Mplus 1c';
    	font-weight: 700;
		color: #ffffff;
		text-align: center;
		border-radius: 50%;
		background: #f86984;
	}
#seehow .sample .explainList > li > dl > dd {
	font-size: 14px;
}
	#seehow .sample .explainList > li > dl > dd aside p {
		font-size: 12px;
	}
	#seehow .sample .explainList > li > dl > dd ul {
		margin: 0.5em 0 0;
		padding: 30px;
		background: #f9f9f9;
	}
		#seehow .sample .explainList > li > dl > dd ul li {
			padding-left: 8px;
			line-height: 1.8;
			background: url("../image/common/icon_disc_grey.png") left 9px no-repeat;
			background-size: 4px auto;
		}
		#seehow .sample .explainList > li > dl > dd ul li + li {
			margin-top: 1em;
		}
			#seehow .sample .explainList > li > dl > dd ul li dt {
				font-weight: bold;
			}
/*ジャパンケネルクラブホームページへ*/
#seehow .jckLink {
	padding: 30px 40px;
	font-size: 14px;
	background: #f9f9f9;
}
	#seehow .jckLink a {
		display: inline-block;
		padding-right: 1em;
		font-size: 13px;
		font-weight: bold;
		color: #f86984;
		line-height: 1;
		background: url("../image/common/icon_target_pink.png") right top no-repeat;
		background-size: 10px auto;
	}

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

	#seehow .sample > dd {
		overflow: hidden;
	}
	#seehow .sample > dd > p {
		float: left;
		width: 400px;
	}
	#seehow .sample > dd .explainList {
		float: right;
		width: 580px;
	}
	#seehow .jckLink a:hover {
		text-decoration: underline;
	}

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

/*//////////////////////////////////////////////////
    マイクロチップについて
///////////////////////////////////////////////////*/
#microchip .introTop {
	margin-bottom: 63px;
}
#microchip .introTop > p {
	display: table;
	background: #f9f9f9;
}
	#microchip .introTop > p span {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
#microchip .introTop > div {
	font-size: 16px;
}
#microchip .introTop > div > p + p {
	margin-top: 1.5em;
}
#microchip .introTop > div aside {
	margin-top: 1em;
	font-size: 13px;
}
#microchip .introTop > div ul {
	margin-top: 26px;
	padding: 20px 40px;
	font-size: 14px;
	background: #f9f9f9;
}
	#microchip .introTop > div ul li {
		padding-left: 8px;
		background: url("../image/common/icon_disc_grey.png") left 7px no-repeat;
		background-size: 4px auto;
	}
	#microchip .introTop > div ul li + li {
		margin-top: 0.5em;
	}
#microchip .infoContact {
	margin-bottom: 40px;
}
	#microchip .infoContact h4 {
		font-size: 16px;
		font-weight: bold;
	}
	#microchip .infoContact dl dt {
		font-weight: bold;
	}
#microchip .infoContact + p {
	font-size: 16px;
}
#microchip .apa {
	padding: 8px 0;
	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;
	text-align: center;
}
	#microchip .apa div {
		flex: 1;
		padding: 30px;
	}
	#microchip .apa dt {
		margin-bottom: 14px;
		letter-spacing: 0.05em;
		font-size: 18px;
		font-family: 'Rounded Mplus 1c';
		font-weight: 700;
	}
	#microchip .apa dt img {
		margin-right: 8px;
		width: auto;
		height: 24px;
	}
	#microchip .apa dd {
		letter-spacing: 0.05em;
		font-size: 16px;
	}
/* pc----------------------------------------------*/
@media (min-width: 769px) {
	#microchip .introTop {
		overflow: hidden;
	}
		#microchip .introTop > p {
			float: right;
			width: 360px;
			height: 180px;
		}
			#microchip .introTop > p span img {
				width: 240px;
			}
			#microchip section:nth-child(2) .introTop > p span img {
				width: 282px;
			}
		#microchip .introTop > div {
			float: left;
			width: 610px;
		}
		#microchip .apa {
			display: flex;
			align-items: flex-start;
		}
		#microchip .apa div + div {
			border-left: 1px solid #dddddd;
		}
		#microchip .apa a:hover {
			text-decoration: underline;
		}
}
/* /pc---------------------------------------------*/