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




/*-----------
contents
-----------*/

#rangehood, #one_widow, #after_cleaning, #winter, #effective{
  width: 100%;
  padding: 60px 0 0;
  border-bottom: 1px solid #d3d3d3;
  overflow:hidden; 
}

#rangehood p, #one_widow, #after_cleaning, #winter p, #effective p{
padding-bottom: 10px;
}


.pb25{
  padding-bottom: 25px !important;
}

.pb50{
  padding-bottom: 50px !important;
}

.pt20{
  padding-top: 20px !important;
}

.cont_box{
  padding-bottom: 80px;
}

ul.list_kome li {
  padding:0 0 5px 1em;
  position: relative;
  font-size: 12px;
  line-height: 1.8;
}

ul.list_kome li:before {
  content: "※";
  position: absolute;
  left : 0;
}

ul.list_ten li {
  padding:0 0 0 1em;
  position: relative;
  font-size: 12px;
  line-height: 1.7;
}

ul.list_ten li:before {
  content: "・";
  position: absolute;
  left : 0;
}

.title{
  width: 270px;
  float: left;
  margin-top: 5px;
  position: relative;
}

.title .title_new{
  position: absolute;
  width: 45px !important;
  height: 45px;
  left: 196px;
  top: -10px;
}

h2{
  margin-bottom: 35px;
}

.contents{
  width: 730px;
  float: right;
  padding: 0 0 60px;
}

.contents .img{
  float: right;
  width: 144px;
  padding: 0 0 20px 10px;
}

.txt_kome {
  padding: 0 0 5px 1em !important;
  position: relative;
  font-size: 12px !important;
  line-height: 1.8;
  text-align: left;
}

.txt_kome:before {
  content: "※";
  position: absolute;
  left: 0;
}

.txt_b{
  color: #3d5c88;
}


/*-----------
rangehood
-----------*/
#rangehood .illust{
  width: 248px;
  margin-left: -21px;
  height: auto;
}

#benri{
  border: 1px solid #666;
  border-radius: 12px;
  margin: 40px 0 25px;
}

#benri h3{
  font-size: 22px;
  text-align: center;
  font-weight: bold;
}

#benri .benri_01{
  padding: 35px 0 10px;
  border-bottom: 1px solid #000;
  position: relative;
}

#benri .benri_01 .txt_kome{
  position: absolute;
  top: 258px;
  left: 335px;
}

#benri .benri_01 img{
  padding: 24px 0 0 72px;
}

#benri .benri_01 img.arrow{
  width: 87px;
  height: 62px;
  position: absolute;
  left: 50%;
  margin-left: -43px;
  bottom: -40px;
  padding: 0;
}

#benri .benri_02{
  padding: 60px 0 70px;
  position: relative;
}
#benri .benri_02 img{
  padding: 21px 0 0 68px;
}

#benri .benri_02 .txt_kome{
  position: absolute;
  top: 296px;
  left: 383px;
}




/*-----------
one_widow
-----------*/
#one_widow .illust{
  width: 198px;
  height: auto;
}

#one_widow .contents_one_img{
  width: 100%;
  padding: 20px 0 80px;
}

#one_widow .result .result_img{
  margin: 0 auto 80px;
  width: 269px;
}

#one_widow .result .result_img img{
  width: 100%;
}

#one_widow .conditions{
  font-size: 13px;
}

#one_widow .conditions h5{
  font-size: 16px;
  font-weight: bold;
  line-height: 1.1;
}

#one_widow .conditions ul li{
  clear: both;
  padding-top: 25px;
}

#one_widow .conditions ul li h6{
  font-size: 16px;
  margin-bottom: 10px;
}

#one_widow .conditions .img_01{
  width: 355px;
  float: left;
  padding: 0 10px 5px 25px;
}

#one_widow .conditions p span{
  font-size: 11px;
}

#one_widow .conditions .img_02{
  width: 100%;
  padding: 15px 15px 0;
  box-sizing: border-box;
}




/*-----------
after_cleaning
-----------*/
#after_cleaning .illust{
  width: 209px;
  height: auto;
  margin-left: -20px;
}

#after_cleaning .result .result_img{
  margin: 0 auto 30px;
  width: 525px;
  height: 249px;
  background: url("../img/contents_dust_result.png") no-repeat center top;
  background-size: 525px auto;
}

#after_cleaning .result .result_img img{
display: none;
}




/*-----------
effective
-----------*/

#effective .illust{
  margin-left: 10px;
  width: 142px;
  height: auto;
}

#effective .contents{
  padding: 0 0 0;
}

#effective .img{
  width: 730px;
  height: auto;
  float: none;
  padding: 10px 20px 0;
}




/*-----------
winter
-----------*/
#winter .illust{
  width: 175px;
  height: auto;
}

#winter .result{
  text-align: center;
  padding: 20px 0 40px;
}

#winter .result h3{
  font-size: 22px;
  font-weight: bold;
  border-bottom: 1px solid #000;
  padding: 0 5px;
  line-height: 1.5;
  margin: 0 0 25px;
  display: inline-block;
}

#winter .result p{
  font-size: 20px;
  padding: 0 0 25px;
}

#winter .result p span{
  font-size: 22px;
  font-weight: bold;
}

#winter .result img{
  margin: 0 auto;
}






.result{
  text-align: center;
  margin: 45px 0 40px;
}

.result h3{
  font-size: 22px;
  font-weight: bold;
  border-bottom: 1px solid #000;
  padding: 0 5px;
  line-height: 1.5;
  margin: 0 0 25px;
  display: inline-block;
}

.result p{
  font-size: 20px;
  padding: 0 0 25px;
}

.result p span{
  font-size: 22px;
  font-weight: bold;
}




.movie{
  height: 364px;
  margin-bottom: 35px;
  outline:1px solid #dedede;
}



#simulation{
  border: 1px solid #666;
  border-radius: 12px;
  padding: 40px;
}

#simulation2{
  border: 1px solid #666;
  border-radius: 12px;
  padding: 40px;
  margin: 40px 0 50px;
}

#simulation3{
  border: 1px solid #666;
  border-radius: 12px;
  padding: 40px;
  margin: 40px 0 0;
}

.simulation{
  border: 1px solid #666;
  border-radius: 12px;
  padding: 40px;
  margin: 40px 0 0;
}

#simulation h4{
  font-size: 22px;
  text-align: center;
  margin-bottom: 35px;
  line-height: 1.8;
}

#simulation2 h4,
#simulation3 h4,
.simulation h4{
  font-size: 22px;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.8;
}

#simulation h5{
  font-size: 14px;
}

#simulation2 h5{
  font-size: 14px;
}



@media screen and ( max-width:767px) {



/*-----------
contents
-----------*/

#contents01, #contents02, #one_widow, #after_cleaning, #winter, #rangehood, #effective{
  padding:12% 0 0;
}

#effective{
overflow: hidden;
}

#one_widow p, #after_cleaning p, #winter p, #rangehood p, #effective p{
  padding-bottom: 3%;
}

p.pb25{
  padding-bottom: 10% !important;
}

p.pb50{
  padding-bottom: 10% !important;
}

.title{
  width: 100%;
  float: none;
  margin-top: 0;
  position: relative;
}

.title .title_new{
  position: absolute;
  width: 13% !important;
  height: auto;
  left: 57%;
  top: -7%;
}

h2{
  margin-bottom: 14%;
}

.contents{
  width: 100%;
  float: none;
  padding: 0 0 12%;
}

.contents .img{
  width: 108px;
  padding: 0 0 20px 0;
}



/*-----------
rangehood
-----------*/
#rangehood .illust{
  margin-left: 0;
  width: 52%;
  position: absolute;
  right: -8%;
  top: 20%;
}

#benri{
  border: 1px solid #666;
  border-radius: 12px;
  margin: 40px 0 25px;
}

#benri h3{
  font-size: 18px;
  padding: 0 4% 4%;
}

#benri .benri_01{
  padding: 8% 0 8%;
  border-bottom: 1px solid #000;
  position: relative;
}

#benri .benri_01 .txt_kome{
  position: relative;
  left: 0;
  top: 0;
  margin: -15% 4% 0 25%;
}

#benri .benri_01 img{
  width: 100%;
  height: auto;
  padding: 0 6% 4%;
  box-sizing: border-box;
}

#benri .benri_01 img.arrow{
  width: 80px;
  height: auto;
  position: absolute;
  left: 50%;
  margin-left: -40px;
  bottom: -40px;
  padding: 0;
}

#benri .benri_02{
  padding: 12% 0 5%;
  position: relative;
}
#benri .benri_02 img{
  width: 100%;
  height: auto;
  padding: 0 4% 4%;
  box-sizing: border-box;
}

#benri .benri_02 .txt_kome{
  position: relative;
  left: 0;
  top: 0;
  margin: 0 4%;
}



/*-----------
after_cleaning
-----------*/
#after_cleaning h2 img{
  width: 55.94%;
}

#after_cleaning .illust{
  margin-left: 0;
  width: 55%;
  position: absolute;
  right: -3%;
  top: 2%;
}

#after_cleaning .result .result_img{
  width: 96.05%;
  height: auto;
  background:none;
}

#after_cleaning .result .result_img img{
  display: block;
  width: 100%;
}



/*-----------
one_widow
-----------*/
#one_widow h2 img{
  width: 56.22%;
}

#one_widow .illust{
  margin-left: 0;
  width: 55%;
  position: absolute;
  right: -12%;
  top: 12%;
}

#one_widow .contents_one_img{
  width: 100%;
  padding: 20px 0 40px;
}

#one_widow .result .result_img{
  margin: 10px auto;
  padding: 0 0 15px;
  width: 70%;
}

#one_widow .conditions .img_01{
  width: 100%;
  float: none;
  padding: 0 10px 15px;
  box-sizing: border-box;
}

#one_widow .conditions .img_02{
  padding: 15px 0 0;
}


/*-----------
winter
-----------*/
#winter h2 img{
  width: 64.64%;
}

#winter .illust{
  margin-left: 0;
  width: 39.63%;
  position: absolute;
  right: -8%;
  top: -5%;
}

#winter .result{
  padding: 2% 0 10%;
}

#winter .result h3{
  font-size: 20px;
  margin: 0 0 20px;
}

#winter .result p{
  font-size: 16px;
}

#winter .result p span{
  font-size: 18px;
}

#winter .result img{
  width: 80%;
}


/*-----------
effective
-----------*/
#effective h2 img{
  width: 58.84%;
}

#effective .illust{
  margin-left: 0;
  width: 31.88%;
  position: absolute;
  right: 0;
  top: 0;
}

#effective .contents{
  padding: 0 0 0;
}

.contents ul.list_re li{
  background: url("../img/list_re.png") no-repeat left 35px;
  background-size: 15px auto;
}

#effective .inner .contents div.box_img{
margin: 0 -4%;
}

#effective .img{
  width: 100%;
  height: auto;
  padding: 0;
}






.result{
  margin: 10% 0 9%;
}

.result h3{
  font-size: 20px;
  margin: 0 0 20px;
}

.result p{
  font-size: 16px;
}

.result p span{
  font-size: 18px;
}


.movie{
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  margin:0 0 25px;
  overflow: hidden;
}

.movie iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}


#simulation{
  border-radius: 10px;
  padding: 15px 15px 25px;
}

#simulation h4{
  margin-bottom: 15px;
  line-height: 1.5;
}

#simulation2 h4,
#simulation3 h4,
.simulation h4{
  margin-bottom: 15px;
  line-height: 1.5;
  padding: 3.5% 0 5.5%;
  margin: 0;
}

#simulation3 h4 span,
.simulation h4 span{
font-size: 18px;
}

#simulation{
  margin-bottom: 10px;
}

#simulation2{
  border-radius: 10px;
  padding: 15px 15px 25px;
}

#simulation3,
.simulation{
  border-radius: 10px;
  padding: 15px 15px 25px;
  margin-bottom: 10px;
}


}