@charset "utf-8";

/* section
---------------------------------------------------------- */
.section-faq-01 {
	padding: 65px 0 0;
	background-color: #fafafa;
}
	.section-faq-01 .ttl-cmn-01 {
		margin-bottom: 50px; 
		color: #0f9179;
	}
	.section-faq-01 .box-cmn-01 {
		padding: 40px 50px 40px 40px;
		background-color: #fff;
	}
		.section-faq-01 .box-cmn-01 .box-faq-01 { border-top: 1px solid #e4e4e4;}
			.section-faq-01 .box-cmn-01 .box-faq-01:last-of-type { border-bottom: 1px solid #e4e4e4;}
		.section-faq-01 .box-cmn-01 .box-faq-01 .box-question {
			padding: 26px 0 24px;
			cursor: pointer;
			position: relative;
			z-index: 999;
		}
			.section-faq-01 .box-cmn-01 .box-faq-01 .box-question span {
				display: block;
				position: relative;
				padding: 0 20px 0 50px;
				color: #333;
				font-size: 18px;
				font-size: 1.8rem;
				cursor: pointer;
			}
				.section-faq-01 .box-cmn-01 .box-faq-01 .box-question span:before {
					content: "";
					position: absolute;
					top: -3px;
					left: 0;
					width: 32px;
					height: 32px;
					background: url(/content/dam/sites/jp_unicharmpet_com/pro/faq/ico_faq_01.png) 0 0 no-repeat;
					background-size: 32px;
				}
				.section-faq-01 .box-cmn-01 .box-faq-01 .box-question span:after {
					content: "";
					position: absolute;
					top: 10px;
					right: 0;
					width: 13px;
					height: 8px;
					background: url(/content/dam/sites/jp_unicharmpet_com/pro/common/ico_arrow_down_04.png) 0 0 no-repeat;
					background-size: 13px 8px;
				}
				.section-faq-01 .box-cmn-01 .box-faq-01 .box-question.open span:after {
					background: url(/content/dam/sites/jp_unicharmpet_com/pro/common/ico_arrow_up_02.png) 0 0 no-repeat;
					background-size: 13px 8px;
				}
				
		.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer {
			display: none; 
			padding-bottom: 21px;
		}
			.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer .txt {
				position: relative;
				margin-bottom: 6px;
				padding: 10px 0 0 50px;
				color: #4c4c4c;
			}
				.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer .txt:before {
					content: "";
					position: absolute;
					top: 50%;
					left: 0;
					width: 32px;
					height: 32px;
					margin-top: -12px;
					background: url(/content/dam/sites/jp_unicharmpet_com/pro/faq/ico_answer_01.png) 0 0 no-repeat;
					background-size: 32px;
				}
			.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer .btn {
				display: inline-block;
				position: relative;
				margin-left: 50px;
				padding-left: 22px;
				color: #0f9179;
				cursor: pointer;
			}
				.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer .btn:before {
					content: "";
					position: absolute;
					top: 50%;
					left: 0;
					width: 13px;
					height: 8px;
					margin-top: -4px;
					background: url(/content/dam/sites/jp_unicharmpet_com/pro/common/ico_arrow_up_02.png) 0 0 no-repeat;
					background-size: 13px 8px;
				}
	.section-faq-01.type-01,
	.section-faq-01.type-02 { padding: 60px 0 0;}
	.section-faq-01.type-03 { padding: 63px 0 140px;}
@media screen and (max-width: 600px) {
	.section-faq-01 { padding: 60px 19px 0;}
		.section-faq-01 .ttl-cmn-01 { margin-bottom: 30px;}
		.section-faq-01 .box-cmn-01 { padding: 20px 20px;}
			.section-faq-01 .box-cmn-01 .box-faq-01 .box-question {
				padding: 14px 0 11px;
			}
				.section-faq-01 .box-cmn-01 .box-faq-01 .box-question span {
					padding: 0 20px 0 47px;
					font-size: 18px;
					font-size: 1.8rem;
				}
					.section-faq-01 .box-cmn-01 .box-faq-01 .box-question span:before {
						top: -3px;
						left: 0;
						width: 35px;
						height: 35px;
						background-size: 35px;
					}
					.section-faq-01 .box-cmn-01 .box-faq-01 .box-question span:after {
						top: 10px;
						right: 7px;
						width: 12px;
						height: 7px;
						margin-top: 0;
						background-size: 12px 7px;
					}
					.section-faq-01 .box-cmn-01 .box-faq-01 .box-question.open span:after { background-size: 12px 7px;}
			.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer { padding-bottom: 14px;}
				.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer .txt {
					margin-bottom: 5px; 
					padding: 15px 0 0 47px;
					font-size: 16px;
					font-size: 1.6rem;
				}
					.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer .txt:before {
						top: 12px;
						left: 0;
						width: 35px;
						height: 35px;
						margin-top: 0;
						background-size: 35px;
					}
				.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer .btn {
					margin-left: 48px;
					padding-left: 22px;
					font-size: 16px;
					font-size: 1.6rem;
					font-weight: bold;
				}
					.section-faq-01 .box-cmn-01 .box-faq-01 .box-answer .btn:before {
						width: 12px;
						height: 7px;
						margin-top: -3px;
						background: url(/content/dam/sites/jp_unicharmpet_com/pro/common/ico_arrow_up_02.png) 0 0 no-repeat;
						background-size: 12px 7px;
					}
	.section-faq-01.type-01 { padding: 49px 19px 0;}
	.section-faq-01.type-02 { padding: 43px 19px 0;}
	.section-faq-01.type-03 { padding: 59px 19px 70px;}
}

/* ttl-lineup-01
---------------------------------------------------------- */
.ttl-faq-01 {
	position: relative;
	margin-bottom: 23px;
	padding-top: 88px;
	color: #4c4c4c;
	font-size: 24px;
	font-size: 2.4rem;
	text-align: center;
}
	.ttl-faq-01:before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 142px;
		height: 84px;
		margin-left: -71px;
		background: url(/content/dam/sites/jp_unicharmpet_com/pro/faq/img_faq_01.png) 0 0 no-repeat;
		background-size: 142px 84px;
	}
.ttl-faq-01.type-01 { padding-top: 100px;}
	.ttl-faq-01.type-01:before {
		top: 0;
		left: 50%;
		width: 63px;
		height: 94px;
		margin-left: -47px;
		background: url(/content/dam/sites/jp_unicharmpet_com/pro/faq/img_faq_02.png) 0 0 no-repeat;
		background-size: 63px 94px;
	}
	
.ttl-faq-01.type-02 { padding-top: 90px;}
	.ttl-faq-01.type-02:before {
		top: 0;
		left: 50%;
		width: 45px;
		height: 91px;
		margin-left: -23px;
		background: url(/content/dam/sites/jp_unicharmpet_com/pro/faq/img_faq_03.png) 0 0 no-repeat;
		background-size: 45px 91px;
	}
	
.ttl-faq-01.type-03 { padding-top: 66px;}
	.ttl-faq-01.type-03:before {
		top: 0;
		left: 50%;
		width: 129px;
		height: 48px;
		margin-left: -65px;
		background: url(/content/dam/sites/jp_unicharmpet_com/pro/faq/img_faq_04.png) 0 0 no-repeat;
		background-size: 129px 48px;
	}
@media screen and (max-width: 600px) {
	.ttl-faq-01 {
		margin-bottom: 15px;
		padding-top: 59px;
		font-size: 19px;
		font-size: 1.9rem;
	}
		.ttl-faq-01:before {
			top: 0;
			left: 50%;
			width: 91px;
			height: 54px;
			margin-left: -46px;
			background-size: 91px 54px;
		}
	.ttl-faq-01.type-01 { padding-top: 68px;}
		.ttl-faq-01.type-01:before {
			top: 0;
			left: 50%;
			width: 42px;
			height: 62px;
			margin-left: -21px;
			background-size: 42px 62px;
		}
		
	.ttl-faq-01.type-02 { padding-top: 73px;}
		.ttl-faq-01.type-02:before {
			top: 0;
			left: 50%;
			width: 32px;
			height: 64px;
			margin-left: -16px;
			background-size: 32px 64px;
		}
		
	.ttl-faq-01.type-03 { padding-top: 45px;}
		.ttl-faq-01.type-03:before {
			top: 0;
			left: 50%;
			width: 84px;
			height: 31px;
			margin-left: -42px;
			background-size: 84px 31px;
		}
}


.test-accordian .ttl{
	cursor: pointer;
}
	.test-accordian .txt{
		display: none;
	}