@charset "UTF-8";
/* CSS Document */

/* フレームサイズ共通 */
/*-------------------------------------------------------*/
.about_caw, .construction_caw, .pack_caw, .understand_caw, .content_area{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 150px auto;
}

/* 見出し共通 */
/*-------------------------------------------------------*/
.heading, .heading_ect{
	width: 100%;
	margin-bottom: 60px;
	padding: 10px;
	position: relative;
	border-top: 1px solid #cccccc;
	font-weight: 800;
}
.heading_ect{
	color: #888888;
}
.heading::before, .heading_ect::before{
	content: "";
	width: 300px;
	height: 3px;
	position: absolute;
	left: 0;
	bottom: 0;
}
.heading::before{
	background: #52a40a;
}
.heading_ect::before{
	background: #333333;
}

/*中見出し*/
.m_heading{
    padding: 10px 50px;
	display: inline-block;
	position: relative;
    font-weight: 800;
    text-align: center;
    color: #339900;
}
.m_heading::before, .m_heading::after{
    content: "";
    width: 40px;
    height: 100%;
	position: absolute;
}
.m_heading::before{
    top: 0;
    left: 0;
    border-top: 5px solid #339900;
    border-bottom: 5px solid #339900;
    border-left: 5px solid #339900;
}
.m_heading::after{
    top: 0;
    right: 0;
    border-top: 5px solid #339900;
    border-bottom: 5px solid #339900;
    border-right: 5px solid #339900;
}
.m_heading_fs_l{font-size: 1.6rem;}
.m_heading_fs_m{font-size: 1.3rem;}
.m_heading_fs_s{font-size: 1rem;}

.m_heading span{
    display: block;
    font-size: 1rem;
    color: #333333;
}

/*小見出し*/
.subheading{
	display: inline-block;
	position: relative;
	margin-bottom: 10px;
    font-weight: 800;
}

.subheading::before{
	content: "";
	width: 30px;
	height: 1px;
	position: absolute;
	top: 11px;
	left: -50px;
	background: #444343;
}
.subheading::after{
	content: "";
	width: 30px;
	height: 1px;
	position: absolute;
	top: 11px;
	right: -50px;
	background: #444343;
}

/*画像下イメージ図　表示*/
.foot_figure{
	position: relative;
}
.foot_figure::after{
	content: "※イメージ図";
	position: absolute;
	bottom: -20px;
	font-size: 0.8rem;
}
.foot_figure::after{
	right: 10px;
}

/* TOP-IMG部分 */
/*-------------------------------------------------------*/

.top_img{
	width: 100%;
	height: 90vh;
    margin: 20px 0 100px 0;
    position: relative;
	background-image: url("../images/main_img.jpg");
	background-size: cover;
}
.top_img .heading_top{
	width: 860px;
	height: auto;
	padding: 70px 0 30px 0;
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    margin: auto;
	border-top: 7px solid #339900;
	border-left: 7px solid #339900;
	border-right: 7px solid #339900;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	background: #ffffff;
	text-align: center;
}
.top_img .heading_top .logo{
	width: 346px;
	margin-bottom: 30px;
	display: inline-block;
}
.top_img .heading_top .logo img{
	width: 100%;
	height: auto;
}
.top_img .heading_top h1{
	margin-bottom: 30px;
	font-size: 1.6rem;
	font-weight: 800;
}
.top_img .heading_top h1 span{
	font-size: 2rem;
}
.top_img .heading_top p{
	font-size: 1.3rem;
	font-weight: 800;
	color: #339900;
}


/*クルマでこんな不満や心配、ありませんか？*/
/*-------------------------------------------------------*/
.about_caw h2{
    margin-bottom: 50px;
    position: relative;
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
}
.about_caw h2 span{
    color: #339900;
}
.about_caw h2 br{
    display: none;
}
.about_caw h2::after{
    content: "";
    width: 400px;
    height: 5px;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: auto;
    background: #339900;
}
.about_caw ul{
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}
.about_caw ul li{
	width: 32%;
    margin-bottom: 2%;
	padding: 30px 10px 30px 35px;
    display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
	background: #e8e8e7;
    font-size: 1.1rem;
	font-weight: 800;
    color: #339900;
    text-align: center;
}
.about_caw ul li::before{
	content: "";
	width: 30px;
	height: 8px;
	position: absolute;
	left: 0;
	top: 45%;
	background: #ffffff;
}

/*C.A.W 抗菌・防臭チタニアを施工すると…*/
/*-------------------------------------------------------*/
.construction_caw{
    text-align: center;
}
.construction_caw .inner{
	padding: 0 20px 30px 20px;
	border: 5px solid #339900;
}
.construction_caw .inner h2{
    width: 76%;
    max-width: 700px;
    padding: 0 20px;
    margin: -30px auto 30px auto;
    background: #ffffff;
	font-size: 1.8rem;
    font-weight: 800;
}
.construction_caw .inner h3{
    width: 66%;
    max-width: 580px;
    padding: 15px 20px;
    margin: 0 auto 10px auto;
    display: block;
    background: #339900;
	font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
}
.construction_caw .inner p{
    margin-bottom: 40px;
	font-size: 0.9rem;
}
.construction_caw ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.construction_caw .inner ul li{
    width: 44%;
    margin: 0 40px 20px 0;
	padding-left: 1.2rem;
    position: relative;
    font-weight: 800;
    text-align: left;
}
.construction_caw .inner ul li:nth-child(even){
    margin: 0 0 20px 0;
}
.construction_caw .inner ul li::before{
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 4px;
    left: 0;
    background: #339900;
    border-radius: 100%;
}

/*抗菌・抗ウイルス・防臭パック*/
/*-------------------------------------------------------*/
.pack_caw ul{
	display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.pack_caw ul li{
	width: 32%;
    margin-bottom: 2%;
}
.pack_caw ul li img{
	width: 100%;
    height: auto;
}
.pack_caw ul li span{
	display: block;
    font-size: 0.9rem;
    text-align: left;
}

/*よりご理解いただくために*/
/*-------------------------------------------------------*/
.understand_caw{
    padding-bottom: 60px;
	background: #E6E6E6;
}
.understand_caw h2{
	width: 80%;
    max-width: 680px;
	margin: 0 auto 60px auto;
	padding: 0 40px 10px 40px;
	position: relative;
	background: #ffffff;
	font-size: 1.8rem;
	font-weight: 800;
	text-align: center;
    color: #339900;
}
.understand_caw h2 span{
    display: block;
    font-size: 1rem;
    color: #333333;
}
.understand_caw ul{
	margin-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
    color: #339900;
}
.understand_caw ul li{
	width: 32%;
    margin: 0 0 2% 1%;
	padding: 30px 10px 30px 40px;
	position: relative;
	background: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    color: #339900;
    text-align: center;
}
.understand_caw ul li::before{
	content: "";
	width: 30px;
	height: 8px;
	position: absolute;
	left: 0;
	top: 45%;
	background: #E6E6E6;
}
.understand_caw ul li span{
	display: block;
    font-size: 1.3rem;
	font-weight: 800;
	text-align: center;
	color: #666666;
}
.understand_caw h3, .understand_caw p{
	padding: 0 20px 0 20px;
}
.understand_caw h3{
	margin-bottom: 10px;
    font-weight: 800;
}


/*-------------------------------------------------------*/
.section1, .section2, .section3, .section4{
	padding: 0 20px;
}

/*抗菌・防臭・抗ウイルス効果のメカニズム*/
/*-------------------------------------------------------*/

.section1 ul{
    margin-bottom: 50px;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.section1 ul li{
	width: 31%;
}
.section1 ul li img{
	width: 100%;
    height: auto;
}

/*SIAAマーク*/
/*-------------------------------------------------------*/

.section2 h3{
    width: 300px;
    margin: 0 auto 50px auto;
    border-bottom: 5px solid #999999;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}

.section2 .siaa, .section2 .siaa_v{
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.section2 .siaa li, .section2 .siaa_v li{
	width: 30%;
    margin-right: 100px;
}
.section2 .siaa li:nth-child(2), .section2 .siaa_v li:nth-child(2){
    margin-right: 0;
}
.section2 .siaa li .img{
    width: 192px;
	margin: 0 auto 15px auto;
}
.section2 .siaa_v li .img{
    width: 246.5px;
	margin: 0 auto 15px auto;
}
.section2 .siaa li .img img, .section2 .siaa_v li .img img{
    width: 100%;
    height: auto;
}
.section2 .siaa li p , .section2 .siaa_v li p{
    width: 100%;
}
.section2 .siaa_v li ul{
    padding-left: 1rem;
}
.section2 .siaa_v li ul li{
    width: 100%;
	text-indent: -1rem;
}


/*消臭剤との違い、各テスト 見出し*/
/*-------------------------------------------------------*/
.intro{
	width: 86%;
	max-width: 900px;
	margin: 0 auto 80px auto;
	text-align: center;
}
.intro h2{
	margin-bottom: 10px;
	position: relative;
	font-size: 1.8rem;
	font-weight: 800;
}
.intro h2::before{
	content: "";
	width: 40%;
	max-width: 160px;
	height: 5px;
	background: #339900;
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	margin: auto;
}
.intro h2 br{
	display: none;
}
.intro p{
	font-weight: 800;
	color: #339900;
}


/*活性炭の場合、包括消臭の場合、C.A.W抗菌・防臭チタニアの場合*/
/*-------------------------------------------------------*/
.section3 p{
	margin-bottom: 30px;
}
.section3 .img{
	width: 100%;
    max-width: 1041px;
}
.section3 .img img{
    width: 100%;
	height: auto;
}



/*動画*/
/*-------------------------------------------------------*/
.movie .video{
	height: 350px;
	margin: 0 4%;
	position: relative;
}
.movie .video iframe {
    position: absolute;
    top: 0;
    left: 0;
	right: 0;
	margin: auto;
}

/*試験機関の各テスト*/
/*-------------------------------------------------------*/
.section4 h3{
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    color: #339900;
}
.section4 p{
    margin-bottom: 50px;
    text-align: center;
}
.section4 ul{
    padding: 15px;
    margin-bottom: 50px;
    border: 1px solid #cccccc;
}
.section4 ul li{
    text-indent: -5.8rem;
    padding-left: 5.2rem;
}
.section4 ul li span{
    font-weight: 800;
}
.section4 .test{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.section4 .test .box{
    width: 47%;
	display: flex;
	flex-direction: column;
    text-align: center;
}
.section4 .test .box p{
    flex-grow: 1;
    margin: 0 auto 30px auto;
	display: inline-block;
	text-indent: -8rem;
    padding-left: 7rem;
    text-align: left;
}
.section4 .test .box .img img{
    width: 100%;
    height: auto;
}

/*防臭テスト*/
.section4 .test_deodorant{
    text-align: center;
}
.section4 .test_deodorant p{
    margin-bottom: 0;
}
.section4 .test_deodorant .img{
    width: 80%;
    max-width: 612px;
    margin: 0 auto 50px auto;
}
.section4 .test_deodorant .img img{
    width: 100%;
    height: auto;
}
.section4 .test_deodorant .box{
    margin-bottom: 15px;
    padding: 25px 15px;
    border: 3px solid #339900;
}
.section4 .test_deodorant .box p{
    font-size: 1.2rem;
    font-weight: 800;
    color: #339900;
	text-align: center;
}
.section4 .test_deodorant .note_indent{
    text-align: left;
}


@media screen and (min-width: 0px) and (max-width: 1100px) {

/* フレームサイズ共通 */
/*-------------------------------------------------------*/
.about_caw, .construction_caw, .pack_caw, .understand_caw{
	padding: 0 20px;
}
    
/* TOP-IMG部分 */
/*-------------------------------------------------------*/
.top_img{
	height: 90vh;
    background-position: center center;
}
.top_img .heading_top{
	width: 80%;
	padding: 7% 0 10px 0;
}
.top_img .heading_top .logo{
	width: 44%;
}
.top_img .heading_top h1{
	margin-bottom: 30px;
	font-size: 1.5rem;
}
.top_img .heading_top h1 span{
	font-size: 1.8rem;
}
.top_img .heading_top p{
	font-size: 1.1rem;
}
	
/*クルマでこんな不満や心配、ありませんか？*/
/*-------------------------------------------------------*/
.about_caw ul li{
	width: 49%;
}
.about_caw ul li br{
	display: none;
}
 
/*C.A.W 抗菌・防臭チタニアを施工すると…*/
/*-------------------------------------------------------*/
.construction_caw .inner ul li{
    width: 47%;
}

/*よりご理解いただくために*/
/*-------------------------------------------------------*/
.understand_caw{
    padding-bottom: 60px;
}
.understand_caw ul li{
	width: 48%;
}

}

@media screen and (min-width: 0px) and (max-width: 780px) {
/* フレームサイズ共通 */
/*-------------------------------------------------------*/
.about_caw, .construction_caw, .pack_caw, .understand_caw, .content_area{
	margin: 0 auto 120px auto;
}
	
/* 見出し共通 */
/*-------------------------------------------------------*/
	
/*小見出し*/
.subheading::before{
	width: 25px;
	left: -35px;
}
.subheading::after{
	width: 25px;
	right: -35px;
}
/*中見出し*/
.m_heading_fs_l{font-size: 1.3rem;}
.m_heading_fs_m{font-size: 1.1rem;}
.m_heading_fs_s{font-size: 1rem;}



/* TOP-IMG部分 */
/*-------------------------------------------------------*/
.top_img{
	height: 80vh;
    background-position: center center;
}
.top_img .heading_top{
	width: 96%;
	padding: 6% 20px 20px 20px;
}
.top_img .heading_top .logo{
	width: 42%;
    margin-bottom: 10px;
}
.top_img .heading_top h1{
	margin-bottom: 20px;
	font-size: calc(100vw / 35);
}
.top_img .heading_top h1 span{
	font-size: calc(100vw / 20);
}
.top_img .heading_top h1 br{
	
}
.top_img .heading_top p{
	font-size: calc(100vw / 30);
}

/*クルマでこんな不満や心配、ありませんか？*/
/*-------------------------------------------------------*/
.about_caw h2{
    font-size: 1.4rem;
}
.about_caw h2 br{
    display: block;
}
.about_caw h2::after{
    width: 50%;
}
.about_caw ul{
	display: block;
}
.about_caw ul li{
	width: 100%;
    justify-content: flex-start;
    padding: 20px 30px 20px 50px;
	text-align: left;
}
.about_caw ul li br{
	display: none;
}

/*C.A.W 抗菌・防臭チタニアを施工すると…*/
/*-------------------------------------------------------*/
.construction_caw .inner h2{
    width: 90%;
	font-size: 1.4rem;
	text-align: left;
}
.construction_caw .inner h3{
    width: 96%;
	font-size: 1.1rem;
}
.construction_caw .inner ul{
    padding-bottom: 30px;
}
.construction_caw .inner ul li{
    width: 100%;
}
   
/*消臭剤との違い、各テスト 見出し*/
/*-------------------------------------------------------*/
.intro{
	width: 90%;
	margin: 0 auto 60px auto;
}
.intro h2{
	font-size: 1.4rem;
}
.intro h2 br{
	display: block;
}
.intro p{
	text-align: left;
}
	
/*抗菌・抗ウイルス・防臭パック*/
/*-------------------------------------------------------*/
.pack_caw ul li{
	width: 49%;
    margin-bottom: 2%;
}
    
/*よりご理解いただくために*/
/*-------------------------------------------------------*/
.understand_caw h2{
	width: 92%;
	padding: 0 15px 10px 15px;
	font-size: 1.4rem;
}
.understand_caw ul{
	padding: 0;
}
.understand_caw ul li{
	width: 100%;
    margin: 0 0 2% 0;
    font-size: 1rem;
}
.understand_caw ul li br{
	display: none;
}
.understand_caw ul li span{
	padding-right: 1.4rem;
    font-size: 1.2rem;
}
    
/*抗菌・防臭・抗ウイルス効果のメカニズム*/
/*-------------------------------------------------------*/
.section1 ul li{
	width: 48%;
    margin-bottom: 30px
}
.section1 ul li:last-child{
	margin-bottom: 0;
}

/*SIAAマーク*/
/*-------------------------------------------------------*/
.section2 h3{
    font-size: 1.2rem;
}

.section2 .siaa, .section2 .siaa_v{
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.section2 .siaa li, .section2 .siaa_v li{
	width: 90%;
    margin: 0 auto 50px auto;
}
.section2 .siaa li:nth-child(2), .section2 .siaa_v li:nth-child(2){
    margin: 0 auto;
}
.section2 .siaa li .img{
    width: 192px;
	margin: 0 auto 15px auto;
	padding-left: 30px;
}
.section2 .siaa_v li .img{
    width: 236.5px;
	margin: 0 auto 15px auto;
}
.section2 .siaa_v li ul li{
    margin-bottom: 0;
}
 
/*動画*/
/*-------------------------------------------------------*/
.movie .video{
	margin: 0 4% 150px 4%;
	position: relative;
    height: 0;
    padding: 0 0 51.32%;
    overflow: hidden;
}
.movie .video iframe {
    width: 100%;
    height: 100%;
}
	
/*試験機関の各テスト*/
/*-------------------------------------------------------*/
.section4 h3{
    font-size: 1.2rem;
    text-align: left;
}
.section4 .test .box{
    width: 86%;
    margin: 0 auto 50px auto;
    text-align: center;
}
.section4 .test .box:nth-child(2){
    margin: 0 auto 0 auto;
}

/*防臭テスト*/
.section4 .test_deodorant .img{
    width: 86%;
    max-width: 612px;
    margin: 0 auto 50px auto;
}
.section4 .test_deodorant .box p{
    font-size: 1.1rem;
	text-align: left;
}
.section4 .test_deodorant .box p br{
    display: none;
}


}