@charset "UTF-8";

/* CSS Document */

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

/*//////////////////////////////////////////////////
    しつけ
///////////////////////////////////////////////////*/

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

/* --------------------------------------------------
    トップのメニュー一覧
-------------------------------------------------- */
.training .indexMenu li:first-child a .imgBox img {
	width: 172px;
}
.training .indexMenu li:nth-child(2) a .imgBox img {
	width: 200px;
}
.training .indexMenu li:nth-child(3) a .imgBox img {
	width: 190px;
}

/*//////////////////////////////////////////////////
    犬猫のしつけ
///////////////////////////////////////////////////*/
.trainingDog h3 + p{
	font-size: 16px;
	margin-bottom: 40px;
}
.trainingDog h3 + p ~ p,
.trainingCat h3 + p{
	margin-bottom: 40px;
	font-size: 16px;
}

/* --------------------------------------------------
    刺激の後には褒めることが大切
-------------------------------------------------- */
.trainingDog .praise > dl,
.trainingCat .praise > dl {
	margin-top: 40px;
    padding: 27px 30px 30px;
	background: #fff;
}
.trainingDog .praise > dl dt,
.trainingCat .praise > 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;
}


/* --------------------------------------------------
    習慣になる前に
-------------------------------------------------- */
.trainingDog .habit {
	position: relative;
	margin-bottom: 60px;
	padding: 40px 60px;
	z-index: 1;
	border-radius: 4px;
	background: #fee6e9;
}
.trainingDog .habit: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;
}
	.trainingDog .habit h4 {
		margin-bottom: 30px;
		font-family: Meiryo,"メイリオ";
		font-weight: bold;
		font-size: 22px;
		text-align: center;
		letter-spacing: 0.1em;
	}
	.setOs .trainingDog .habit h4 {
		font-family: 'Rounded Mplus 1c';
    	font-weight: 700;
	}
	.trainingDog .habit dl {
		position: relative;
		font-size: 16px;
	}
		.trainingDog .habit dl dt {
			margin-bottom: 20px;
			font-weight: bold;
			color: #f86984;
		}
			.trainingDog .habit dl dd > p {
				padding: 20px;
				text-align: center;
				background: #ffffff;
			}

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

	.trainingDog .habit {
		height: 300px;
	}
	.trainingDog .habit dl dd > div {
		width: 600px;
	}
	.trainingDog .habit dl dd > p {
		position: absolute;
		top: 0;
		right: 0;
		width: 240px;
	}
		.trainingDog .habit dl dd > p img {
			width: 160px;
		}

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


/*動愛法*/
.apa {
	margin: 60px 0 0;
	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;
}


/*//////////////////////////////////////////////////
    犬のしつけのポイント
///////////////////////////////////////////////////*/
.trainingDog .whatDogTraining{
	margin-bottom: 20px;
}
.trainingDog .pointBox {
	margin-bottom: 60px;
	padding: 40px 60px;
	background: #f9f9f9;
}
.trainingDog .pointBox > div + div {
	margin-top: 20px;
}
	.trainingDog .pointBox > div > p {
		position: relative;
		text-align: center;
		border-radius: 4px;
		background: #ffffff;
	}
		.trainingDog .pointBox > div > p > img{
			width: 160px;
			height: 160px;
			padding: 20px;
		}
		.trainingDog .pointBox > div > p span {
			position: absolute;
			left:0;
			bottom: 0;
			width: 100%;
			font-family: Meiryo,"メイリオ";
			font-weight: bold;
			font-size: 20px;
			color: #ffae00;
			letter-spacing: 0.1em;
			text-shadow:0 2px 0 #775535,
				        2px 0 0 #775535,
				        0 -2px 0 #775535,
				        -2px 0 0 #775535,
				        -2px -2px 0 #775535,
				        2px -2px 0 #775535,
				        -2px 2px 0 #775535,
				        2px 2px 0 #775535;
		}
		.setOs .trainingDog .pointBox > div > p span {
			font-family: 'Rounded Mplus 1c';
    		font-weight: 700;
		}
	.trainingDog .pointBox > div > dl {
		font-size: 14px;
	}
		.trainingDog .pointBox > div > 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;
		}
		.trainingDog .pointBox > div > dl dd em {
			font-weight: bold;
		}
/* pc----------------------------------------------*/
@media (min-width: 769px) {

	.trainingDog .pointBox > div {
		display: flex;
	}
	.trainingDog .pointBox > div > p {
		width: 160px;
		height: 160px;
	}
	.trainingDog .pointBox > div > dl {
		float: left;
		width: 740px;
		padding: 10px 0 0 20px;
	}

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

/*//////////////////////////////////////////////////
    猫のしつけのポイント
///////////////////////////////////////////////////*/
.trainingCat .pointBox p{
	font-size: 16px;
}
.trainingCat .pointBox p:first-child{
	margin-bottom: 20px;
}

/*//////////////////////////////////////////////////
    吠えについて
///////////////////////////////////////////////////*/
.trainingDog .barkingBox {
	margin-bottom: 60px;
	padding: 40px 60px;
	background: #f9f9f9;
}
	.trainingDog .barkingBox h4 {
		margin-bottom: 30px;
		font-family: Meiryo,"メイリオ";
		font-weight: bold;
		font-size: 22px;
		text-align: center;
		letter-spacing: 0.1em;
	}
	.setOs .trainingDog .barkingBox h4 {
		font-family: 'Rounded Mplus 1c';
    	font-weight: 700;
	}
	.trainingDog .barkingBox h4 + p {
		margin-bottom: 20px;
		font-size: 16px;
		font-weight: bold;
		color: #f86984;
		text-align: center;
	}
		.trainingDog .barkingBox h4 + p span {
			font-size: 13px;
		}
	.trainingDog .barkingBox > div {
		overflow: hidden;
		margin-bottom: 20px;
		padding: 40px 60px 20px;
		font-size: 14px;
		background: #ffffff;
	}
		.trainingDog .barkingBox > div ul {
			display: table;
		}
			.trainingDog .barkingBox > div ul li {
				position: relative;
				display: table-cell;
				width: 50%;
			}
			.trainingDog .barkingBox > div ul li p {
				display: block;
				font-weight: bold;
				text-align: center;
			}
			.trainingDog .barkingBox > div ul li p:first-child {
				margin-bottom: 25px;
			}
			.trainingDog .barkingBox > div ul li p:nth-child(3) {
				position: absolute;
				left: 0;
				bottom: 0;
				display: inline-block;
				width: 100%;
				height: 30px;
				line-height: 1.2;
				vertical-align: middle;
			}
	.trainingDog .barkingBox > div + p {
		font-size: 16px;
	}
/* pc----------------------------------------------*/
@media (min-width: 769px) {

	.trainingDog .barkingBox > div ul {
		width: 50%;
		height: 250px;
	}
		.trainingDog .barkingBox > div ul li p:first-child img {
			width: 45px;
		}
	.trainingDog .barkingBox > div ul li p:nth-child(2) {
		padding-top: 20px;
	}
		.trainingDog .barkingBox > div ul li p:nth-child(2) img {
			width: 160px;
		}
	.trainingDog .barkingBox > div .NG {
		float: left;
	}
	.trainingDog .barkingBox > div .OK {
		float: right;
	}
	.trainingDog .barkingBox > div .OK .OK2 p:nth-child(2) {
		padding-top: 0;
	}

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

/*//////////////////////////////////////////////////
	子犬の社会化期
///////////////////////////////////////////////////*/
.trainingDog .socialBox{
	margin-bottom: 60px;
	padding: 40px 60px;
	background: #f9f9f9;
}
	.trainingDog .socialBox h4 {
		margin-bottom: 30px;
		font-family: Meiryo,"メイリオ";
		font-weight: bold;
		font-size: 22px;
		text-align: center;
		letter-spacing: 0.1em;
	}
	.setOs .trainingDog .socialBox h4 {
		font-family: 'Rounded Mplus 1c';
		font-weight: 700;
	}
	.trainingDog .socialBox .imgList {
		margin-bottom: 20px;
		padding: 30px 40px;
		text-align: center;
		background: #ffffff;
	}
		.trainingDog .socialBox .imgList li {
			display: inline-block;
			vertical-align: bottom;
		}
		.trainingDog .socialBox .imgList li + li {
			margin-left: 20px;
		}
		.trainingDog .socialBox .imgList li:first-child {
			width: 150px;	
		}
		.trainingDog .socialBox .imgList li:nth-child(2) {
			width: 190px;	
		}
		.trainingDog .socialBox .imgList li:nth-child(3) {
			width: 80px;
		}
		.trainingDog .socialBox .imgList li:nth-child(4) {
			width: 160px;	
		}
		.trainingDog .socialBox .imgList li:nth-child(5) {
			width: 120px;	
		}
	.trainingDog .socialBox .txtList {
		font-size: 16px;
	}
		.trainingDog .socialBox .txtList li {
			padding-left: 10px;
			line-height: 1.8;
			background: url("../image/common/icon_disc_grey.png") left 10px no-repeat;
			background-size: 4px auto;
		}
			.trainingDog .socialBox .txtList li em {
				font-weight: bold;
			}

/*//////////////////////////////////////////////////
	子猫の社会化期
///////////////////////////////////////////////////*/
.trainingCat .socialBox{
	margin-top: 40px;
	margin-bottom: 60px;
	padding: 40px 60px;
	background: #f9f9f9;
}
	.trainingCat .socialBox h4 {
		margin-bottom: 30px;
		font-family: Meiryo,"メイリオ";
		font-weight: bold;
		font-size: 22px;
		text-align: center;
		letter-spacing: 0.1em;
	}
	.setOs .trainingCat .socialBox h4 {
		font-family: 'Rounded Mplus 1c';
    	font-weight: 700;
	}
	.trainingCat .socialBox .imgList {
		margin-bottom: 20px;
		padding: 30px 40px;
		text-align: center;
		background: #ffffff;
	}
		.trainingCat .socialBox .imgList li{
			display: inline-block;
			vertical-align: bottom;
		}
		.trainingCat .socialBox .imgList li + li {
			margin-left: 20px;
		}
		.trainingCat .socialBox .imgList li:first-child {
			width: 150px;	
		}
		.trainingCat .socialBox .imgList li:nth-child(2) {
			width: 190px;	
		}
		.trainingCat .socialBox .imgList li:nth-child(3) {
			width: 80px;
		}
		.trainingCat .socialBox .imgList li:nth-child(4) {
			width: 160px;	
		}
		.trainingCat .socialBox .imgList li:nth-child(5) {
			width: 120px;	
		}
		.trainingCat .socialBox .txtList {
			font-size: 16px;
		}
		.trainingCat .socialBox .txtList li {
			padding-left: 10px;
			line-height: 1.8;
			background: url("../image/common/icon_disc_grey.png") left 10px no-repeat;
			background-size: 4px auto;
		}
			.trainingCat .socialBox .txtList li em {
				font-weight: bold;
			}

/*//////////////////////////////////////////////////
    甘噛みのしつけ方
///////////////////////////////////////////////////*/
.trainingDog .chewBox {
	margin-bottom: 60px;
	padding: 40px 60px;
	font-size: 14px;
	background: #f9f9f9;
}
	.trainingDog .chewBox dl + dl {
		margin-top: 30px;
	}
		.trainingDog .chewBox 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;
		}
		.trainingDog .chewBox dl .imgCnt > p {
			padding: 20px;
			border-radius: 4px;
			background: #ffffff;
		}
		.trainingDog .chewBox dl .imgCnt div p:nth-child(2){
			margin-top: 20px;
		}
		.trainingDog .chewBox dl .imgCnt aside p {
			position: relative;
			padding-left: 1em;
			font-size: 13px;
		}
		.trainingDog .chewBox dl .imgCnt aside p:before {
			content: '※';
			position: absolute;
			left: 0;
		}
		.trainingDog .chewBox dl .imgCnt > p {
			display: flex;
			justify-content: center;
			align-items: center;
		}
/* pc----------------------------------------------*/
@media (min-width: 769px) {

	.trainingDog .chewBox dl .imgCnt {
		overflow: hidden;
		display: flex;
	}
	.trainingDog .chewBox dl .imgCnt > p{
		order: 2;
		width: 240px;
		height: 160px;
		margin-left: 20px;
	}
	.trainingDog .chewBox dl .imgCnt div p{
		width: 620px;
	}
	.trainingDog .chewBox dl:nth-child(2) .imgCnt > p img {
		width: 120px;
	}

}

/*//////////////////////////////////////////////////
    トイレのしつけ方
///////////////////////////////////////////////////*/
.toiletBox {
	margin-bottom: 60px;
	padding: 40px 60px;
	font-size: 14px;
	background: #f9f9f9;
}
.toiletBox dl + dl {
	margin-top: 40px;
}
	.toiletBox 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;
	}

/* //////////
	排泄のタイミング
///////////// */
.toiletBox .toiletTiming{
	width: 100%;
	margin-top: 20px;
	padding: 30px 120px 31px;
	background: #fff;
}
	.toiletBox .toiletTiming > dt{
		margin-bottom: 10px;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		background: none;
	}
	.toiletBox .toiletTiming dd ul{
		display: flex;
		justify-content: space-between;
	}
		.toiletBox .toiletTiming dd ul li{
			text-align: center;
		}
		.toiletBox .toiletTiming dd ul li img{
			width: 140px;
			margin-bottom: 15px;
		}
.toiletBox > aside{
	margin-top: 20px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}
.toiletBox > aside p{
	font-weight: bold;
	font-size: 18px;
	color: #f86984;
}
.toiletBox > aside img{
	width: 171px;
}
.trainingCat .toiletBox .toiletClean dd > p{
	width: 100%;
	margin: 10px auto 0;
	padding: 20px 30px;
	background: #fff;
}
.trainingCat .toiletBox dl div{
	display: flex;
	flex-flow: column;
}
	.trainingCat .toiletBox dl div p{
		order: 2;
	}
	.trainingCat .toiletBox dl div ul{
		max-width: 320px;
		margin-bottom: 20px;
		padding: 22px 50px 21px;
		display: flex;
		justify-content: center;
		align-items: center;
		order: 1;
		background: #fff;
	}
	.trainingCat .toiletBox dl div ul li + li{
		margin-left: 20px;
	}
	.trainingCat .toiletBox dl div ul figure{
		text-align: center;
	}
	.trainingCat .toiletBox dl div ul figure img{
		width: 100px;
	}
/* pc----------------------------------------------*/
@media (min-width: 769px) {
	.trainingCat .toiletBox dl div{
		flex-flow: nowrap;
	}
	.trainingCat .toiletBox dl div ul{
		order: 2;
		margin-bottom: 0;
		margin-left: 40px;
	}
	.trainingCat .toiletBox .toiletClean dd{
		display: flex;
		justify-content: space-between;
	}
	.trainingCat .toiletBox .toiletClean dd > p{
		margin: 0;
		max-width: 240px;
	}
	.toiletBox > aside{
		flex-flow: nowrap;
	}
	.toiletBox > aside p{
		margin-right: 30px;
	}

}

/* --------------------------------------------------
    トイレの置く場所
-------------------------------------------------- */
.toiletPlace{
	display: flex;
	flex-flow: column;
}
	.toiletPlace > div{
		order: 2;
	}
	.toiletPlace > p{
		width: 100%;
		height: 174px;
		padding: 20px;
		margin-bottom: 20px;
		background: #f9f9f9;
		display: grid;
		justify-content: center;
		align-items: center;
		order: 1;
	}
	.toiletPlace > p > img{
		width: 200px;
	}
.placeList {
	margin: 1em 0;
}
	.placeList li {
		position: relative;
		padding-left: 40px;
		font-size: 14px;
	}
	.placeList li + li {
		margin-top: 10px;
	}
		.placeList li span {
			position: absolute;
			top: -2px;
			left: 0;
			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 .placeList li span {
			font-family: 'Rounded Mplus 1c';
			font-weight: 500;
		}

/* pc----------------------------------------------*/
@media (min-width: 769px) {
	.toiletPlace{
		flex-flow: nowrap;
	}
	.toiletPlace > div {
		order: 1;
	}
	.toiletPlace > p{
		max-width: 240px;
		max-height: 160px;
		margin-left: 40px;
		order: 2;
	}

}
/*//////////////////////////////////////////////////
    爪とぎのしつけ方
///////////////////////////////////////////////////*/
.trainingCat .clawBox {
	margin-bottom: 60px;
	padding: 40px 60px;
	font-size: 14px;
	background: #f9f9f9;
}
	.trainingCat .clawBox > div {
		position: relative;
		margin-bottom: 40px;
	}
	.trainingCat .clawBox dl + dl {
		margin-top: 30px;
	}
		.trainingCat .clawBox dl dt {
			margin-bottom: 3px;
			padding-left: 20px;
			font-size: 16px;
			font-weight: bold;
			background: url("../image/common/ttl_paw.png") left 5px no-repeat;
			background-size: 16px auto;
		}
		.trainingCat .clawBox dl .imgBox {
			padding: 20px;
			border-radius: 4px;
			background: #ffffff;
		}
		.trainingCat .clawBox dl .imgCnt > p {
			padding: 40px 10px 30px 30px;
			border-radius: 4px;
			background: #ffffff;
		}
		.trainingCat .clawBox dl .imgCnt aside p {
			position: relative;
			padding-left: 1em;
			font-size: 13px;
		}
		.trainingCat .clawBox dl .imgCnt aside p:before {
			content: '※';
			position: absolute;
			left: 0;
		}

	.trainingCat .clawBox dl .imgCnt > div > p {
		margin-bottom: 40px;
	}
	.trainingCat .clawBox dl .imgCnt > div ul li {
		padding-left: 10px;
		background: url("../image/common/icon_disc_grey.png") left 7px no-repeat;
		background-size: 4px auto;
	}
	.trainingCat .clawBox dl .imgCnt > div ul li + li {
		margin-top: 5px;
	}
/* pc----------------------------------------------*/
@media (min-width: 769px) {

	.trainingCat .clawBox > div dl {
		max-width: 620px;
	}
	.trainingCat .clawBox dl .imgBox {
		position: absolute;
		top: 30px;
		right: 0;
		width: 240px;
	}
	.trainingCat .clawBox dl .imgCnt {
		overflow: hidden;
	}
	.trainingCat .clawBox dl .imgCnt > p {
		float: right;
		width: 240px;
	}
	.trainingCat .clawBox dl .imgCnt > div {
		float: left;
		width: 615px;
	}
}

/*//////////////////////////////////////////////////
    災害への備え
///////////////////////////////////////////////////*/
.trainingDisaster section {
	margin-top: 60px;
}
.trainingDisaster section:first-of-type {
	margin-top: 45px;
}
.trainingDisaster p {
	font-size: 16px;
}
.trainingDisaster aside {
	margin-top: 15px;
	font-size: 13px;
}
.trainingDisaster .clearfix > p {
	float: right;
}
.trainingDisaster section:nth-of-type(4) .clearfix > p {
	padding: 25px;
	width: 360px;
	text-align: center;
	background: #f9f9f9;
}
.trainingDisaster section:nth-of-type(4) .clearfix > p img {
	width: 301px;
}
.trainingDisaster .clearfix > div {
	float: left;
	width: 620px;
}
.trainingDisaster .checkList {
	margin-top: 35px;
	padding: 35px 60px 40px;
	background: #fff5f5;
}
.trainingDisaster .checkList dt {
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.trainingDisaster .checkList ul {
	float: left;
	padding: 15px 10px 15px 20px;
	width: 500px;
	line-height: 1.85;
	letter-spacing: 0.05em;
	font-size: 13px;
	background: #ffffff;
}
.trainingDisaster .checkList li {
	padding-left: 15px;
	background: url(../image/common/icon_check.png) left 0.65em no-repeat;
	background-size: 8px auto;
}
.trainingDisaster .checkList p {
	position: relative;
	width: 304px;
}