@charset "UTF-8";


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

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

.main_visual_v3 ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: center;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}
.main_visual_v3 ul li:last-of-type{
	width: 75%;
	padding-right: 15%;
}
/*----------------------------------------
	feature_v3
-----------------------------------------*/

.feature_v3 .main_pic{
	margin-bottom: 7%;
}
.feature_v3 .main_pic img{
	border-radius: 40px;
}
.feature_inactivation{
	background: url("../img/01_v3/feature_inactivation_bg.png")no-repeat center top #54b1bf;
	color: #fff;
	line-height: 2;
	padding: 40px;
	box-sizing: border-box;
	border-radius: 30px;
	display: flex;
	justify-content: space-between;
}
.feature_inactivation .ttl{
	font-size: calc(12px + 10 * (100vw - 360px) / 840); 
	font-weight: 800;
	line-height: 1.5;
	background: url("../img/01_v3/feature_inactivation_ico.png")no-repeat right 5px top;
	background-size: 80px;
}
.feature_inactivation .ttl span{
	font-size: calc(30px + 10 * (100vw - 360px) / 840); 
	color: #fff447;
}
.feature_inactivation .inactivation_l{
	flex: 1;
}
.feature_inactivation .inactivation_r{
	width: 90px;
	text-align: right;
}

.feature_effect{
	background: url("../img/01_v3/feature_effect_bg.png")no-repeat right top #e3eef0;
	border-radius: 40px;
	padding: 7%;
	position: relative;
}
.feature_effect .effect_list{
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-column-gap: 40px;
}
.feature_effect .ttl{
	font-size: calc(12px + 10 * (100vw - 360px) / 840);
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
}
.feature_effect .small{
	font-size: 1.2rem;
	margin-bottom: 40px;
	text-align: right;
}
.feature_effect .list_ttl{
	background:none;
	font-size: 1.6rem;
	font-weight: 700;
	padding: 0 0 10px 0;
}
.feature_effect li{
	background: url("../img/01_v3/feature_effect_check.png")no-repeat left center;
	font-size: 1.4rem;
	padding: 10px 0 10px 40px;
	line-height: 1.5;
}
.feature_effect .effect_cat{
	position: absolute;
	bottom:-20px;
	left:15%;
}
.feature_box{
	background:#e3eef0;
	padding:40px;
	border-radius: 30px;
}
.feature_box .ttl{
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	margin-bottom: 20px;
}
.feature_box dl{
	margin: 10px auto;
	text-align: left;
}
.feature_box dt{
	background: url("../img/01_v3/feature_effect_check.png")no-repeat left center;
	padding: 10px 0 10px 40px;
	line-height: 1.5;
	font-weight: 700;
}
.feature_box dd{
	font-size: 1.4rem;
	line-height: 1.5;
}
.effect_cat02{
	margin: 20px auto 0 auto;
	text-align: center;
}

.noadditives{
	margin: 20px auto 0 auto;
}
.noadditives .ad_ttl{
	font-size: calc(12px + 10 * (100vw - 360px) / 840);
	font-weight: 800;
	margin:0 auto 20px auto;
}
.noadditives .noadditives_box{
	display: grid;
	grid-template-columns:1fr 2fr;
	grid-column-gap: 30px;
}
.noadditives .noadditives_box li{
	background: #21acc6;
	color: #fff;
	font-weight: 800;
	display: inline-block;
	border-radius: 50px;
	line-height: 1.5;
	padding:10px 20px;
	font-size: 1.3rem;
	margin: 5px 0;
}
/*----------------------------------------
	howto_v3
-----------------------------------------*/

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

.howto_v3 .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_v3 .scene_list dt{
	border:6px #b7dbe1 solid;
	border-radius: 30px;
	padding:25px;
}
.howto_v3 .scene_list .scene_ttl{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
	text-align: center;
	line-height: 1.3;
	background:#cfe6ea;
	border-radius: 50px;
	padding:5px;
}
.howto_v3 .scene_list dd{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
	text-align: center;
	line-height: 1.7;
	margin-top: 10px;
}

.howto_v3 .other .ttl{
	font-size: calc(16px + 10 * (100vw - 360px) / 840);
	font-weight: 800;
	line-height: 1.5;
	background: #cfe6ea;
	border-radius: 50px;
	text-align: center;
	padding: 10px;
	width: 80%;
	margin:10% auto 50px auto;
}
.howto_v3 .other .other_list{
	display: grid;
	grid-template-columns: repeat(auto-fit, 12%);
	justify-content: space-between;
  gap:0 20px;
	margin-top: 4%;
	box-sizing: border-box;
}
.howto_v3 .other_list dd{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
	text-align: center;
	line-height: 1.5;
	margin-top: 10px;
}

/*----------------------------------------
	safety_v3
-----------------------------------------*/

.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: #bae2e8;
	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_v3 .small{
	font-size: 1.2rem;
	text-align: right;
	line-height: 1.5;
}

/*----------------------------------------
	faq_v3
-----------------------------------------*/
.faq_v3 dl {
	background: url("../img/01_v3/faq_line.png")repeat-x left bottom;
	margin-bottom: 40px;
	padding-bottom: 40px;
	text-align: left;
}
.faq_v3 dl:last-of-type {
	background: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.faq_v3 dt {
	background: url("../img/01_v3/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_v3 dd {
	background: url("../img/01_v3/faq_a.png")no-repeat left top;
	padding:0 0 10px 80px;
	line-height: 2;
}

/*----------------------------------------
	info_v3
-----------------------------------------*/
.info_v3 {
	margin:6% auto 10% auto ;
}
.info_v3 dl {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 30px auto;
}
.info_v3 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_v3 .btn{
	display: block;
	margin: 0 auto;
	text-align: center;
}
/*media Queries タブレットサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {

/*----------------------------------------
	cmn_inner
-----------------------------------------*/

.feature_inactivation{
	width: auto;
	text-align: left!important;
}
/*----------------------------------------
	howto_v3
-----------------------------------------*/
.howto_v3 .type{
	display: block;
}
.howto_v3 .type .spray{
	font-size: calc(20px + 10 * (100vw - 360px) / 840);
}
.howto_v3 .type .foam{
	font-size: calc(20px + 10 * (100vw - 360px) / 840);
}
.howto_v3 .type li:first-of-type{
	margin-bottom: 30px;
}
.howto_v3 .scene_list dd{
	font-size: calc(5px + 10 * (100vw - 360px) / 840);
}	
.howto_v3 .scene_list{
	grid-template-columns: repeat(auto-fit, 30%);
  gap: 30px 20px;
}
.howto_v3 .other .other_list{
	grid-template-columns: repeat(auto-fit, 22%);
	gap: 20px 20px;
}
.howto_v3 .other_list dt{
	text-align: center;
}
.howto_v3 .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_v3{
	position:relative;
	margin: 0 7%;
	padding: 23% 0 0 0;
}

.main_visual_v3 ul{
	display: block;
	margin: 0 auto;
}
.main_visual_v3 ul li:nth-child(1){
	padding: 0 15%;
}
.main_visual_v3 ul li:nth-child(2){
	padding:0 15% 5% 15% ;
}
.main_visual_v3 ul li:last-of-type{
	width: auto;
	padding-right: 0;
}
/*----------------------------------------
	feature_v3
-----------------------------------------*/

.feature_v3 .main_pic{
	margin-bottom: 15%;
}
.feature_v3 .main_pic img{
	border-radius: 10px;
}
.feature_inactivation{
	padding: 10%;
	display: block;
}
.feature_inactivation .ttl{
	font-size: calc(18px + 10 * (100vw - 360px) / 840); 
	margin-bottom: 10px;
	background: url("../img/01_v3/feature_inactivation_ico.png")no-repeat right top;
	background-size: 80px;
}
.feature_inactivation .ttl span{
	font-size: calc(30px + 10 * (100vw - 360px) / 840); 
	color: #fff447;
}
.feature_inactivation .inactivation_r{
	text-align:center;
	display: flex;
	align-content: center;
	justify-content: center;
	margin-top: 20px;
	width: auto;
}
.feature_inactivation .inactivation_r img{
	width: 50px;
}
.feature_effect{
	border-radius: 40px;
	padding:15% 10%;
	position: relative;
}
.feature_effect .effect_list{
	display: block;
}
.feature_effect .ttl{
	font-size: calc(17px + 10 * (100vw - 360px) / 840);
}
.feature_effect .small{
	font-size: 1.2rem;
	margin-bottom: 30px;
	text-align: center;
}
.feature_effect .effect_list ul:first-of-type{
	margin-bottom: 30px;
}
.feature_effect .list_ttl{
	font-size: 1.4rem;
}
.feature_effect li{
	font-size: 1.3rem;
	padding: 7px 0 7px 30px;
	background-size: 20px;
}
.feature_effect .effect_cat{
	position: relative;
	bottom:auto;
	left:auto;
	margin:20px auto 0 auto;
	text-align: center;
}
.feature_box{
	padding:15% 10%;
}
.feature_box .ttl{
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	margin-bottom: 20px;
}
.feature_box dl{
	margin: 10px auto;
}
.feature_box dt{
	padding: 7px 0 7px 30px;
	background-size: 20px;
	text-align: left;
	line-height: 1.7;
}
.feature_box dd{
	font-size: 1.3rem;
	text-align: left;
	line-height: 1.7;
}
.effect_cat02{
	margin: 20px auto 30px auto;
	text-align: center;
}
.effect_cat02 img{
	width: 65%;
}

.feature_box{
	background:#e3eef0;
	padding:40px;
	border-radius: 30px;
}
.feature_box .ttl{
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	margin-bottom: 20px;
}
.feature_box dl{
	margin: 10px auto;
	text-align: left;
}
.feature_box dt{
	background: url("../img/01_v3/feature_effect_check.png")no-repeat left center;
	padding: 10px 0 10px 40px;
	line-height: 1.5;
	font-weight: 700;
}
.feature_box dd{
	font-size: 1.4rem;
	line-height: 1.5;
}

.noadditives{
	margin: 30px auto 0 auto;
}
.noadditives .ad_ttl{
	font-size: calc(22px + 10 * (100vw - 360px) / 840);
	margin:0 auto 20px auto;
}
.noadditives .noadditives_box{
	display: block;
}
.noadditives .noadditives_box li{
	font-size: 1.2rem;
}
.effect_cat03{
	margin:0 auto 20px auto;
	text-align: center;
}
.effect_cat03 img{
	width: 40%;
}

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

/*----------------------------------------
	safety_v3
-----------------------------------------*/	
/*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_v3 .small{
	font-size: 1.2rem;
	text-align: left;
	margin-top: 10px;
}
	
/*----------------------------------------
	faq_v3
-----------------------------------------*/
.faq_v3 dl {
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.faq_v3 dt {
	background-size: 40px;
	padding: 10px 0 10px 50px;
	font-size: 1.5rem;
	margin-bottom: 10px;
}
.faq_v3 dd {
	background-size: 40px;
	padding: 0 0 10px 50px;
}
	
/*----------------------------------------
	info_v3
-----------------------------------------*/
.info_v3 {
	margin:15% auto 25% auto ;
}
.info_v3 dl {
	display: block;
	margin: 0 auto 30px auto;
}
.info_v3 dt {
	margin: 0 16%;
	text-align: center;
}
.info_v3 dd {
	font-size: calc(18px + 10 * (100vw - 360px) / 840);
	margin: 10px auto 0 auto;
	text-align: center;
}
.info_v3 a{
	display: block;
	margin: 0 auto;
	text-align: center;
}
	
}

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

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

.main_visual_v3{
	padding: 30% 0 0 0;
}
	
}
/*media Queries スマホサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
	
/*----------------------------------------
	main_visual
-----------------------------------------*/

.main_visual_v3{
	padding: 35% 0 0 0;
}

}