@charset "UTF-8";


/*----------------------------------------
	main_visual
-----------------------------------------*/

.main_visual_pet{
	position:relative;
	margin: 0 40px;
	padding: 160px 0 0 0;
}

.main_visual_pet ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: center;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}
.main_visual_pet li{
	position: relative;
}
.main_visual_pet li .ico{
	position: absolute;
	right: -20%;
	top:10px;
}
.main_visual_pet ul li:last-of-type{
	width: 75%;
	padding:10% 30% 0 0 ;
}
/*----------------------------------------
	pet_ico
-----------------------------------------*/
.pet_ico_l{
	position: absolute;
	top:-50px;
	left:50px;
}
.pet_ico_r{
	position: absolute;
	top:-50px;
	right:50px;
}
/*----------------------------------------
	feature_pet
-----------------------------------------*/

.feature_list ul{
	display: grid;
	grid-template-columns:repeat(4, 1fr);
	grid-column-gap: 30px;
}
.feature_list li{
	background: url("../img/02_pet/feature_ico_bg.png")no-repeat center center;
	background-size: 100%;
	text-align: center;
	padding: 30% 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.feature_list li:nth-child(even){
	margin-top: 50px;
}
.feature_list li p{
	font-family: "Poppins", sans-serif;
  font-weight: 700;
	color: #fa9f00;
	line-height: 1.5;
	font-size: calc(12px + 10 * (100vw - 360px) / 840);
}
.feature_list li dt{
	font-size: calc(12px + 10 * (100vw - 360px) / 840);
  font-weight: 800;
	line-height: 1.5;
	margin-bottom: 7px;
}
.feature_list li dd{
  font-weight: 500;
	line-height: 1.5;
}

.feature_pet .noadditives_box{
	display: grid;
	grid-template-columns:1fr 3fr;
	grid-column-gap: 30px;
	background: #bce0e7;
	padding: 7%;
	border-radius: 50px;
}
.feature_pet .noadditives_box li{
	background: #21acc6;
	color: #fff;
	font-weight: 700;
	display: inline-block;
	border-radius: 50px;
	line-height: 1.5;
	padding:10px 20px;
	font-size: calc(10px + 10 * (100vw - 360px) / 840);
	margin: 10px 0;
}
/*----------------------------------------
	howto_pet
-----------------------------------------*/

.howto_pet .howto_ttl{
	display: flex;
	align-items: center;
}
.howto_pet .howto_ttl p{
	font-size: calc(22px + 10 * (100vw - 360px) / 840);
	font-weight: 800;
	line-height: 1.5;
	flex: 1;
	margin-left: 20px;
}
.howto_pet .type{
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-column-gap: 40px;
	margin-top: 4%;
}
.howto_pet .type li{
	background: #ffe86c;
	border-radius: 40px;
	padding: 40px;
	display: flex;
}
.howto_pet .type li dl{
	flex: 1;
	margin-left: 20px;
}
.howto_pet .type .spray{
	font-size: calc(7px + 16 * (100vw - 360px) / 840);
	font-weight: 800;
	line-height: 1.5;
	background: url("../img/02_pet/howto_type_ico01.png")no-repeat left center;
	padding: 20px 0 20px 90px;
}
.howto_pet .type .foam{
	font-size: calc(7px + 16 * (100vw - 360px) / 840);
	font-weight: 800;
	line-height: 1.5;
	background: url("../img/02_pet/howto_type_ico02.png")no-repeat left center;
	padding: 20px 0 20px 90px;
}

.howto_pet .scene_list{
	display: grid;
	grid-template-columns: repeat(auto-fit, 23%);
	justify-content: space-between;
  gap: 40px 20px;
	margin-top: 4%;
	box-sizing: border-box;
}
.howto_pet .scene_list dt{
	border:6px #a5d5bb solid;
	border-radius: 30px;
	padding:0;
}
.howto_pet .scene_list dd{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
	text-align: center;
	line-height: 1.7;
	margin-top: 10px;
}


/*----------------------------------------
	safety_pet
-----------------------------------------*/

.line-4 {
	display: grid;
	grid-template-columns:2fr 2fr 3fr 1fr;
	background: #f0f0f0;
	margin: 20px 0;
	width: 100%;
}
.line-4 tr,
.line-4 tbody,
.line-4 thead{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }
.line-4 th{
	background: #ffe86c;
	border-right:1px solid #c0c0c0;
	font-weight: 700;
	padding: 20px;
	line-height: 1.5;
}
.line-4 th:last-of-type,.line-4 td:last-of-type{
	border-right:none;
}
.line-4 td:first-of-type{
	font-weight: 700;
}
.line-4 td{
	border-right:1px solid #c0c0c0;
	border-bottom:1px solid #c0c0c0;
	padding: 20px;
	line-height: 1.5;
}
.line-4 .last td{
	border-bottom:none;
}
.safety_pet .small{
	font-size: 1.2rem;
	text-align: right;
	line-height: 1.5;
}

/*----------------------------------------
	faq_pet
-----------------------------------------*/
.faq_pet dl {
	background: url("../img/02_pet/faq_line.png")repeat-x left bottom;
	margin-bottom: 40px;
	padding-bottom: 40px;
	text-align: left;
}
.faq_pet dl:last-of-type {
	background: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.faq_pet dt {
	background: url("../img/02_pet/faq_q.png")no-repeat left center;
	padding: 15px 0 15px 80px;
	font-size: 2.0rem;
	font-weight: 800;
	line-height: 1.5;
	margin-bottom: 20px;
}
.faq_pet dd {
	background: url("../img/02_pet/faq_a.png")no-repeat left top;
	padding:0 0 10px 80px;
	line-height: 2;
}

/*----------------------------------------
	info_pet
-----------------------------------------*/
.info_pet {
	margin:6% auto 10% auto ;
}
.info_pet dl {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 30px auto;
}
.info_pet dd {
	font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
	line-height: 2;
	font-size: calc(7px + 16 * (100vw - 360px) / 840);
	margin-left: 30px;
}
.info_pet .btn{
	display: block;
	margin: 0 auto;
	text-align: center;
}
/*media Queries タブレットサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {

/*----------------------------------------
	feature
-----------------------------------------*/

.feature_list ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.feature_list li{
	background-size: 85%;
	padding:15% 10px;
	width: 45%;
	box-sizing: border-box;
}
.feature_list li:nth-child(even){
	margin-top: 0px;
}
.feature_list li p{
	font-size: calc(20px + 10 * (100vw - 360px) / 840);
}
.feature_list li dt{
	font-size: calc(18px + 10 * (100vw - 360px) / 840);
  font-weight: 800;
	line-height: 1.5;
	margin-bottom: 7px;
}
/*----------------------------------------
	howto_pet
-----------------------------------------*/
.howto_pet .type{
	display: block;
}
.howto_pet .type .spray{
	font-size: calc(20px + 10 * (100vw - 360px) / 840);
}
.howto_pet .type .foam{
	font-size: calc(20px + 10 * (100vw - 360px) / 840);
}
.howto_pet .type li:first-of-type{
	margin-bottom: 30px;
}
.howto_pet .scene_list dd{
	font-size: calc(5px + 10 * (100vw - 360px) / 840);
}	
.howto_pet .scene_list{
	grid-template-columns: repeat(auto-fit, 30%);
  gap: 30px 20px;
}
.howto_pet .other .other_list{
	grid-template-columns: repeat(auto-fit, 22%);
	gap: 20px 20px;
}
.howto_pet .other_list dt{
	text-align: center;
}
.howto_pet .other_list dd{
  font-size: calc(5px + 10 * (100vw - 360px) / 840);
}
	
}


/*media Queries スマートフォンサイズ（950px以下）で適応したいCSS - スマホ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 950px) {

/*----------------------------------------
	main_visual
-----------------------------------------*/

.main_visual_pet{
	position:relative;
	margin: 0 7%;
	padding: 23% 0 0 0;
}

.main_visual_pet ul{
	display: block;
	margin: 0 auto;
}
.main_visual_pet ul li:nth-child(1){
	padding: 0 15%;
}
.main_visual_pet ul li:nth-child(2){
	padding:0 15% 5% 15% ;
}
.main_visual_pet li .ico{
	width: 30%;
	position: absolute;
	right: -5%;
	top:20px;
}
.main_visual_pet ul li:last-of-type{
	width: auto;
	padding:0 ;
}
	
/*----------------------------------------
	pet_ico
-----------------------------------------*/
.pet_ico_l{
	width: 120px;
	position: absolute;
	top:-20px;
	left:0px;
	right:0px;
	margin: 0 auto;
}
.pet_ico_r{
	width: 120px;
	position: absolute;
	top:-20px;
	right:0px;
	left:0px;
	margin: 0 auto;
}


/*----------------------------------------
	howto_pet
-----------------------------------------*/
.howto_pet .howto_ttl .page_no{
	width: 60px;
}
.howto_pet .howto_ttl p{
	margin-left: 15px;
}
.howto_pet .type{
	margin-top: 10%;
}
.howto_pet .type li{
	padding: 10%;
	display: block;
}
.howto_pet .type li dl{
	margin-left: 0px;
}
.howto_pet .type li .pic{
	text-align: center;
	margin: 0 auto 10px auto;
	width: 25%;
}
.howto_pet .type li .pic img{
	text-align: center;
	margin: 0 auto;
}
.howto_pet .type .spray{
	background-size: 50px;
	padding: 20px 0 20px 60px;
}
.howto_pet .type .foam{
	background-size: 50px;
	padding: 20px 0 20px 60px;
}
	
.howto_pet .scene_list dt{
	border:4px #a5d5bb solid;
	border-radius: 20px;
	padding:15px 6%;
	text-align: center;
}
.howto_pet .scene_list dd{
	font-size: calc(12px + 10 * (100vw - 360px) / 840);
	line-height: 1.3;
}	
.howto_pet .scene_list{
	display: grid;
	grid-template-columns: repeat(auto-fit, 48%);
  gap: 30px 0px;
	margin-top: 10%;
}


/*----------------------------------------
	safety_pet
-----------------------------------------*/	
/*table--------------------------*/	
.table-over{
	overflow-x: scroll;
}
.table-over .over-table{
	width: 800px;
}
.table-over::-webkit-scrollbar-track {
    background: #ecedf3;
  }
.table-over::-webkit-scrollbar {
    height: 10px;
  }
.table-over::-webkit-scrollbar-thumb {
    background: #a1d4dc;
  }
.safety_pet .small{
	font-size: 1.2rem;
	text-align: left;
	margin-top: 10px;
}
	
/*----------------------------------------
	faq_pet
-----------------------------------------*/
.faq_pet dl {
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.faq_pet dt {
	background-size: 40px;
	padding: 10px 0 10px 50px;
	font-size: 1.5rem;
	margin-bottom: 10px;
}
.faq_pet dd {
	background-size: 40px;
	padding: 0 0 10px 50px;
}
	
/*----------------------------------------
	info_pet
-----------------------------------------*/
.info_pet {
	margin:15% auto 25% auto ;
}
.info_pet dl {
	display: block;
	margin: 0 auto 30px auto;
}
.info_pet dt {
	margin: 0 16%;
	text-align: center;
}
.info_pet dd {
	font-size: calc(18px + 10 * (100vw - 360px) / 840);
	margin: 10px auto 0 auto;
	text-align: center;
}
.info_pet a{
	display: block;
	margin: 0 auto;
	text-align: center;
}
	
}

/*media Queries スマホサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 640px) {

/*----------------------------------------
	main_visual
-----------------------------------------*/

.main_visual_pet{
	padding: 30% 0 0 0;
}
/*----------------------------------------
	feature
-----------------------------------------*/
.feature_pet .noadditives_pet .page_ttl{
	margin-bottom: 15%;
}
.feature_pet .noadditives_box{
	display: block;
	padding: 10%;
	border-radius: 30px;
	position: relative;
}
.feature_pet .noadditives_ico{
	margin: 0 auto 20px auto;
	width: 80px;
	position: absolute;
	top:-15%;
	left:10px;
}
.feature_pet .noadditives_box li{
	padding:10px 10px;
	font-size: calc(12px + 10 * (100vw - 360px) / 840);
	margin: 5px 0;
}
}
/*media Queries スマホサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
	
/*----------------------------------------
	main_visual
-----------------------------------------*/

.main_visual_pet{
	padding: 35% 0 0 0;
}
/*----------------------------------------
	feature
-----------------------------------------*/

.feature_list ul{
	display: block;
}
.feature_list li{
	background-size: 70%;
	padding:22% 10px;
	width: auto;
	box-sizing: border-box;
}
.feature_list li:nth-child(even){
	margin-top: 0px;
}
.feature_list li p{
	font-size: calc(20px + 10 * (100vw - 360px) / 840);
}
.feature_list li dt{
	font-size: calc(18px + 10 * (100vw - 360px) / 840);
  font-weight: 800;
	line-height: 1.5;
	margin-bottom: 7px;
}

}